div定位||为啥 margin: 属性还不起作用 left: 起作用？

Posted 2023-03-06

【中文标题】div定位||为啥 margin: 属性还不起作用 left: 起作用？

【英文标题】：Div positioning|| Why does margin: property doesn't work yet the left: works?div定位||为什么 margin: 属性还不起作用 left: 起作用？

【发布时间】：2016-04-08 21:25:19

【问题描述】：

编辑：感谢您对位置的解释，正如我所说，我只是想弄清楚为什么 margin 不起作用而 position:left 是。 所以据我了解，基本上你只能使用静态元素的边距定位，其他任何你必须使用的位置：x。对吧？

我很确定这是非常基础的东西，但我刚刚开始学习定位，我正在修改教程代码，我似乎无法掌握这些 div 内部 div 的行为方式。

根据我一直在阅读的内容，由于没有具有绝对位置的父元素，这段代码不应该使内框边距相对于主体移动吗？如果我使用“left：”属性而不是“margin：”，它就是这样做的。

为了澄清，我只是想了解为什么#inner 相对于#outer 定位，而不管分配给#outer 的位置值如何。

div 
  height: 100px;
  width: 100px;
  border-radius: 5px;
  border: 2px solid black;


#inner 
  height: 75px;
  width: 75px;
  background-color: #547980;
  position: absolute;
  margin-left: 20px;


#outer 
  height: 1500px;
  width: 150px;
  background-color: #45ADA8;
  position: static;
  margin-left: 100px;

<div id="outer">
  <div id="inner"></div>
</div>

结果图片

【参考方案1】：

位置属性

position 属性指定用于元素的定位方法的类型。

有四个不同的position 值：

static

relative

fixed

absolute

How Do They Differ?

1.如果您使用的是static。 默认情况下，html 元素是静态定位的。

Static 定位元素不受top、bottom、left 和right 属性的影响。

.static 
  position: static;
  border:solid 1px red;

<div class="static">Hello i m static position </div>

2.如果您使用的是relative。

设置相对定位元素的top、right、bottom 和left 属性将导致它从正常位置调整。

.relative1 
  position: relative;
  border:solid 1px red;

.relative2 
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
  border:solid 1px black;

<div class="relative1"> hi i m Relative 1</div>
<div class="relative2">hi i m Relative 2</div>

3.如果您使用的是fixed。

带有position: fixed; 的元素定位到视口relative，这意味着即使页面滚动，它也始终保持在同一个位置。 top、right、bottom 和 left 属性用于定位元素。

fixed 元素不会在页面中它通常所在的位置留下空隙。

.fixed 
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: gray;

<div class="fixed">HI i m fixed div </div>

4.如果您将absolute 与relative 一起使用。

absolute 是最棘手的位置值。 absolute 的行为类似于 fixed，除了相对于最近的定位祖先而不是 relative 相对于视口。如果一个绝对定位元素没有定位的祖先，它使用文档body，并且仍然随着页面滚动而移动。请记住，“定位”元素的位置是除static 之外的任何元素。

.relative 
  position: relative;
  width: 600px;
  height: 400px;
  border:solid 1px red;

.absolute 
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
  border:solid 1px gray;

<div class="relative">
<div class="absolute"> I  m Absolute div </div>
</div>

Source by

【讨论】：

感谢您对位置的解释，正如我所说，我只是想弄清楚为什么 margin 不起作用而 position:left 是。所以据我了解，基本上你只能使用静态元素的边距来定位，其他任何你必须使用 position:x 的东西。对吗？

@TylerC 如果你使用绝对位置而不是使用 top, left, right, bottom 最好留边距。

@TylerC 如果您使用绝对位置而不是窗口而不是您的 body 或 div 。如果您习惯于相对而不是绝对意味着用于父 div 的相对值比用于子绝对值的值比它的边距或顶部位置它的父 div 请参阅我的示例以获得更好的解释。

【参考方案2】：

这是因为您没有为绝对 div 赋予顶部/左侧值。

给左位置将表现得像绝对位置。

#inner 
    height: 75px;
    width: 75px;
    background-color: #547980;
    position: absolute;
    margin-left: 20px;
  left:10px;

Fiddle

如果您的绝对 div 具有顶部/底部和左/右是自动的，那么它将表现得像静态位置。

您可以查看更多详情here。