Div定位||为什么 margin: 属性不起作用，而 left: 起作用了？

Question

编辑：感谢您对头寸的解释，正如我所说，我只是想弄清楚为什么保证金不起作用而 position:left 起作用了。所以据我了解，基本上你只能使用静态元素的边距来定位，其他任何你必须使用 position: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>

结果图片

Answer 1

那是因为你没有给你的绝对 div 赋予 top/left 价值。

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

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

Fiddle

如果您的绝对 div 有 top/bottom 和 left/right 是自动的，那么它将表现得像静态位置。

您可以查看更多详情here.

Answer 2

位置属性

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.

设置 relatively-positioned 元素的 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 到视口。如果 absolutely-positioned 元素没有定位的祖先，它使用文档 body，并且仍然随着页面滚动而移动。请记住，"positioned" 元素的位置是除 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

Div定位||为什么 margin: 属性不起作用，而 left: 起作用了？

Div positioning|| Why does margin: property doesn't work yet the left: works?

html

css

positioning

css-position

Div定位||为什么 margin: 属性 不起作用，而 left: 起作用了？

Div positioning|| Why does margin: property doesn't work yet the left: works?

html

css

positioning

css-position

Div定位||为什么 margin: 属性不起作用，而 left: 起作用了？