Positioning Svg Elements Using CSS

How to position SVG with CSS?

you can use position:absolute in your SVG and some text-indent in your #itemCountForCart

.buttonCart {  padding: 2px 40px;  border-radius: 6px;  border: none;  display: inline-block;  color: #fff;  text-decoration: none;  background-color: #28a8e0;  height: 30px;  /*float: right; - removed for demo */  white-space: nowrap;  position: relative;}/*cart in corner top start*/
.cartCornerIcon {  display: inline-block;  vertical-align: top;}.cartCornerText {  display: inline-block;  margin-top:8px}svg {  position: absolute;  width: 100px;  height: 50px;  left: -42px;  top: -8px;}#itemCountForCart {  text-indent:-.8em}

<a href="#" class="cartLinkClass" id="basketLinkId">  <div class="buttonCart">    <div class="cartCornerIcon">      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1.09448819 900.3622047">        <path d="M112.58 327.79v-32h90.468l112.015 256h245.5v32H294.126l-112.016-256M400.563 663.79c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zM560.563 663.79c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48z" />      </svg>      <div id="itemCountForCart">        0      </div>    </div>    <div class="cartCornerText">      Bestellen    </div>  </div></a>

CSS: Load SVG and position relative to its elements

Unfortunately, CSS doesn't allow referencing dynamic properties like positions from unrelated elements.

You can achieve that with JavaScript:

First, check the relative position of each circle

const circle1 = document.querySelector('#circle1');
const { offsetLeft, offsetTop } = circle1;

Then, set those coordinates to the top and left values of these offsets:

const label1 = document.querySelector('#item1');
label1.style.position = 'absolute';
label1.style.left = `${offsetLeft}px`;
label1.style.top = `${offsetTop}px`;

In case getting the offset doesn't work with plain JS and your SVG, consider using a 3rd party library (like jQuery) or reading the cx and cy attributes directly from the <circle> element.

Positioning svg element over div

First, you do not specify a height for your map. That is why it does not appear.
Once you do that, you can just absolutely position both and they will appear overlapping.

// create datavar data = [];for (var i = 0; i < 108; i++) {  data.push(i);}
// Scale for radiusvar xr = d3.scale  .linear()  .domain([0, 108])  .range([0, 27]);
// Scale for random positionvar randomPosition = function(d) {  return Math.random() * 1280;}

var tcColours = ['#FDBB30', '#EE3124', '#EC008C', '#F47521', '#7AC143', '#00B0DD'];var randomTcColour = function() {  return Math.floor(Math.random() * tcColours.length);};

// SVG viewportvar svg = d3.select('body')  .append('svg')  .attr('width', 1280)  .attr('height', 512);
svg.append("text")  .attr("x", 100)  .attr("y", 100)  .attr("text-anchor", "middle")  .style("font-size", "36px")  .style('fill', 'white')  .text("Lorem ipsum");

var update = function() {  var baseCircle = svg.selectAll('circle');  // Bind data  baseCircle = baseCircle.data(data);
  // set the circles  baseCircle.transition()    .duration(40000)    .attr('r', xr)    .attr('cx', randomPosition)    .attr('cy', randomPosition)    .attr('fill', "none")    .attr("stroke-width", 4)    .style('stroke', tcColours[randomTcColour()])
  baseCircle.enter()    .append('circle')    .attr('r', xr)    .attr('cx', randomPosition)    .attr('cy', randomPosition)    .attr('fill', "none")    .attr("stroke-width", 4)    .style('stroke', tcColours[randomTcColour()])    .style('opacity', 1);

}

setTimeout(function() {  update();  //do something once}, 500);
window.onload = function() {  update();  setInterval(update, 50000);};
mapboxgl.accessToken = 'pk.eyJ1Ijoic29jaWFsYmljeWNsZXMiLCJhIjoiTlBhano1cyJ9.1k53PW_xMIrcu3TKku4Tzg';var map = new mapboxgl.Map({  container: 'map', // container id  style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location  center: [-74.50, 40], // starting position [lng, lat]  zoom: 9 // starting zoom});

html,body,main {  height: 100%;  background-color: #130C0E;  opacity: 0.5;  padding: 0;  margin: 0;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}
svg {  position: absolute;  width: 100%;  height: 99%;  /* gets rid of scrollbar */}
#map {  position: absolute;  top: 0;  bottom: 0;  width: 100%;  height: 100%;}

<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css" rel="stylesheet" /><script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div id='map'></div>

How to position a g element SVG

You can add transform:translate() rules to your CSS stylesheet. This ought to work:

svg .down {  transform:translate(0,-4px);  transition:transform 0.3s;}svg:hover .down {  transform:translate(0,4px);}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"     viewBox="15 15 102 102" width="200" height="200">  <g>    <g>      <circle class="st0" cx="66" cy="66" r="43.7" fill="#f00"/>    </g>  </g>  <g class="down">    <polyline points="76.4,71 66,81.4 55.6,71" fill="#fff"/>    <line x1="66" y1="81" x2="66" y2="47" stroke="#fff"/>  </g></svg>

Position SVG elements over an image

Here's a generic example of how to do an image overlay. Basically you wrap the image and the overlay content in a relative positioned element and then absolute position the overlay content.

.img-overlay-wrap {
  position: relative;
  display: inline-block; /* <= shrinks container to image size */
  transition: transform 150ms ease-in-out;
}

.img-overlay-wrap img { /* <= optional, for responsiveness */
   display: block;
   max-width: 100%;
   height: auto;
}

.img-overlay-wrap svg {
  position: absolute;
  top: 0;
  left: 0;
}

.img-overlay-wrap:hover {
  transform: rotate( 15deg );
}

<div class="img-overlay-wrap">

  <img src="https://via.placeholder.com/400">
  <svg viewBox="0 0 200 200">
    <circle cx="75" cy="75" r="50" fill="rebeccapurple"/>
  </svg>

</div>