position html element left of another-CodePudding

I'm positioning one html element absolute at i.e left:1000px. Now I want to place another div element directly in front of it at the left side. Using negative margin is not an option because I dont know the size of the element. Current solution is to use javascript, using hidden attribute until rendered, then get size using getBoundingClientRect() at then apply left: ob.style.left = -viewportOffset.width "px";

Is there a css-grid trick or something I can take advantage of? Im using Blazor if that matters.

<div title=@ToolTipText  style="position:absolute;left:@left;top:@top;height:@height;width:@width;line-height:1;">
    @Value
    @if (!string.IsNullOrEmpty(Title))
        {
            <div  style="position:absolute;line-height:1;background-color:transparent;" @ref="titleElement">@Title</div>
        }

</div>

CodePudding user response：

This seems like a good place to use transform:translateX(-100%), since translate looks at the width of the element of itself.

.firstElement{
  position:absolute;
  left:200px;
  width:50px;
  height:50px;
  background-color:red
}

.secondElement{
  position:absolute;
  left:200px;
  width:40px;
  height:50px;
  background-color:blue;
  transform:translateX(-100%)
}

<div >
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

There is no need to use javascript. In css you can use a transformx(-100%) to align the second element left to the first element.

.firstElement{
  position:absolute;
  left:200px;
  width:50px;
  height:50px;
  background-color:red
}

.secondElement{
  position:absolute;
  left:200px;
  width:40px;
  height:50px;
  background-color:blue;
  transform:translateX(-100%)
}

<div >
  <div ></div>
  <div ></div>
</div>