Position Absolute With Left:100% , Child Element Goes Out Of The Parent Continer

I have some html elements: basically a container div and a child div. So when I give child div the CSS property left: 100%, it goes out of the parent div. The property right: 0 or

Solution 1:

This is the right behavior. If you set left:100% in this setup, it will take the width of the parent and pushes the child 100% of that width to the right, which is 500px. You can, as already mentioned, set a negative margin width fixed pixel values, but i wouldn't recommend it. What if you have a fluid width layout? It won't work.

What's wrong with right: 0, it provides exactly what you are looking for.

Otherwise, if you still want to work with left: 100%; you can add transform: translateX(-100%) to the child. this will move the child on the X-axis by it's width.

Solution 2:

Well, if you have a fixed with, you can do this with a negative margin on your child:

.parent{
  border: 1px solid #000;
  height: 500px;
  position: relative;
  width: 500px;
}
.child{
  background: #FF0;
  height: 100px;
  left: 100%;
  position: absolute;
  width: 100px;
  margin-left: -100px;
}

https://jsfiddle.net/yd48v14m/5/

Solution 3:

You can also do this with floats. I don't know what you want to achieve eventually but this is something you could use too:

.parent {
  border: 1px solid #000;
  height: 500px;
  width: 500px;
}
.child {
  background: #FF0;
  height: 100px;
  width: 100px;
  float: right;
}

<div class="parent">
  <div class="child"></div>
</div>

Solution 4:

With left:100%, you make the first border of your child stays just at the end of their container

If your target is to get the yellow box align to the right, here you have options:

.parent{
  border: 1px solid #000;
  height: 500px;
  position: relative;
  width: 500px;
}
.child{
  background: #FF0;
  height: 100px;
  left: calc(100% - 100px);
  position: absolute;
  width: 100px;

}

---

.child{
  background: #FF0;
  height: 100px;
  right: 0;
  position: absolute;
  width: 100px;

}