Question

编辑：感谢对位置的解释，正如我所说，我只是想弄明白为什么保证金不起作用而且位置：左边是。所以根据我的理解，基本上你只能使用边距来定位静态元素，你必须使用其他任何位置：x。正确？

我非常确定这是非常基本的东西，但我刚开始学习定位，而且我正在修改教程代码，我似乎无法掌握这些div内部div表现得很好。

根据我所阅读的内容，该代码不应使内框边距相对于正文移动，因为没有父元素具有绝对位置？如果我使用＆＃34; left：＆＃34;财产而不是＆＃34;保证金：＆＃34;它就是这样做的。

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

结果图片

Answer 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

Answer 2

这是因为你没有给你的绝对div提供top / left值。

给左侧位置的行为就像绝对位置一样。

function getAgewisedistributiont() {
    var trendUrl = '<s:url value="/campaign/getUserEachSegmentSegmentDashboard" />';
    $.post(trendUrl, params, function(data) {});
}

<强> Fiddle

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

您可以查看更多详细信息 here 。

Div定位||为什么保证金：财产在左边不起作用：有效吗？

2 个答案: