Question

我有以下html：

<!DOCTYPE html>
<html>
    <head>
        <title>JBA</title>
        <style type="text/css">
            body {
                margin:0;
                padding:0;
            }
            #layout {
              float: left;
            }
            #title {
              padding: 10px; 
              border: 1px solid #ccc; 
              position: relative;
            }
            #content {
              position: absolute;
              top: 26px;
              left: 0;
              right: 0;
              bottom: 0;
              border: 1px solid #ccc; 
            }
        </style>
    </head>
    <body>
        <div id="layout">
            <label id="title">Below is content:</label>
            <div id="content">
            </div> 
        </div>
    </body>
    <script>
    </script>
</html>

我需要的是将#content div放在#title标签的正下方。但是，不应更改浮动和位置设置。那么，如何计算#content的顶部？ 26px似乎适用于Chrome，但对于IE，它需要为28px。为什么呢？

Answer 1

给出相对于“#layout”div的位置

#layout {
  float: left;
  position:relative;
}

Answer 2

我已经在铬以及IE9中进行了测试。对于两个位置顶部：28正常工作。屏幕截图已附加。 enter image description here

Answer 3

你期待这样的事情LINK

CSS中的一些变化：

       body {
                margin:0;
                padding:0;
            }
            #layout {
              float: left;
            }
     #title {
              padding: 5px; 
              border: 1px solid #ccc; 
              float:left;
            }
   #content {
              clear:both;
              width:400px;
              height:400px;
              border: 1px solid #ccc; 
            }

Answer 4

您应该在#content上将填充和边距设置为0，因为浏览器会以不同方式呈现（即使未设置）。

绝对定位的div

4 个答案: