Left:100％的绝对位置，子元素从父坐标中移出 [英] Position absolute with Left:100% , Child element goes out of the parent continer

问题描述

我有一些html元素:基本上是一个容器div和一个子div.因此，当我给子div分配CSS属性 left:100％时，它会超出父div.属性 right:0 或CALC可以解决问题，但我只想通过 left:100％来完成此操作，而无需使用Javascript.那么有什么办法可以做到这一点?

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 CALC will do the trick but I want get this done only with left: 100%, and no Javascript. So is there any way to get this done?

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

https://jsfiddle.net/evoSL/yd48v14m/4/

推荐答案

这是正确的行为.如果在此设置中将left:100％设置为100％，它将采用父级的宽度，并将子级的宽度向右推100％，即500px.正如已经提到的，您可以设置负的边距宽度固定像素值，但是我不建议这样做.如果您有一个可变宽度的布局怎么办?这行不通.

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.

right:0 有什么问题，它提供了您所要查找的内容.

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

否则，如果您仍想使用 left:100％; ，则可以向孩子添加 transform:translateX(-100％).这将使孩子在X轴上移动其宽度.

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.

这篇关于Left:100％的绝对位置，子元素从父坐标中移出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！