Html 位置相对属性和权利属性

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12919073/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 03:24:50  来源:igfitidea点击:

position relative and right property

htmlcss

提问by Chapsterj

I always thought by setting the div to relative and right 0 would position the div all the way to the right, if its parent was 100% width. Apparently I'm wrong and only absolute works like that. So is there no way to make it work with relative?

我一直认为通过将 div 设置为 relative 和 right 0 会将 div 一直定位到右侧,如果其父级为 100% 宽度。显然我错了,只有绝对的作品才会这样。那么有没有办法让它与亲戚一起工作?

回答by Willem Van Bockstal

You have to set the parent to be relative, and it's child to absolute positioning.

您必须将父项设置为相对,而将子项设置为绝对定位。

.parent{
  position: relative;
  width: 100%;
}
.right{
  position: absolute;
  width: 200px;
  height: 200px;
  background: red;
  top:0;
  right:0;
}

? Like here: http://jsfiddle.net/willemvb/n9Vrv/

? 像这里:http: //jsfiddle.net/willemvb/n9Vrv/

回答by George

There's a way to make it work to a relative.

有一种方法可以让它对亲戚起作用。

One way is first to set the parent of the display to inline-flex.

一种方法是首先将显示的父级设置为inline-flex

Next, set the element (child) position:relative; margin-left:auto; right:0;.

接下来,设置元素 (child) position:relative; margin-left:auto; right:0;

回答by Quentin

So is there no way to make it work with relative?

那么有没有办法让它与亲戚一起工作?

Correct. Relative positioning is the position offset from where it would be with static positioning.

正确的。相对定位是相对于静态定位的位置偏移。

You need absolute positioning to position with respect to the edges of the containing block.

您需要绝对定位才能相对于包含块的边缘进行定位。