Question

我有一个<div>里面有一些<h1>，<h2>和<p>标签，然后我在这些h1，h2下面有一个<div>，和父标记<div>内的p标记。我在position: relative;的父<div>和position:absolute; top:0px;上<div> <div>。对于h1，h2和p标签，css中没有定位集。我得到的结果是，子<div id="parentDiv"> <h1>Header</h1> <h2>sub header</h2> <p>paragraph text</p> <div id="displayAtTop">test</div> </div>定位到其他子元素的底部，而不是定位到父div的最顶部。这是应该发生的事吗？

** HTML **

#parentDiv {
   position: relative;
   width: 500px;
   min-height: 300px;
}

#parentDiv h1, #parentDiv h2, #parentDiv p {
   margin-left: 30px;
   margin-top: 30px;
}

#displayAtTop {
   position: absolute;
   top: 0px;
   left: 350px;
}

** CSS **

{{1}}

我认为绝对定位应该忽略所有内容并将其放置在具有定位集的最近父元素的顶部。

Answer 1

代码按预期工作。

我添加了一个红色边框，以便于查看。

我想你可能会误解＆lt; body＆gt;或者＆lt; html＆gt;填充/填充问题的余量。

  <head>
    <style type="text/css">

        #parentDiv {
           position: relative;
           width: 500px;
           min-height: 300px;
           border: 1px solid red;
        }

        #parentDiv h1, #parentDiv h2, #parentDiv p {
           margin-left: 30px;
           margin-top: 30px;
        }

        #displayAtTop {
           position: absolute;
           top: 0px;
           left: 350px;
        }

    </style>
  </head>

  <body>

    <div id="parentDiv">
       <h1>Header</h1>
       <h2>sub header</h2>
       <p>paragraph text</p>
       <div id="displayAtTop">test</div>
    </div>

  </body>
</html>

http://jsfiddle.net/StoneCypher/Lq95hcqe/

CSS位置绝对不忽略没有定位的元素

1 个答案: