绝对定位的div

Question

I have the following html: 我有以下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>

What I need is to position #content div right below the #title label. 我需要将#content div放在#title标签的正下方。 However, float and position settings shouldn't be changed. 但是，浮动和位置设置不应更改。 So, how to calculate #content's top? 那么，如何计算#content的顶部？ 26px seems to work for Chrome but, for IE it needs to be 28px. 26px似乎适用于Chrome，但对于IE，它必须为28px。 Why? 为什么？

Answer 1

give position relative to the "#layout" div 给出相对于“ #layout” div的位置

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

Answer 2

I have tested it in chromium as well as IE9. 我已经在铬以及IE9中对其进行了测试。 For both position top: 28 is working properly. 对于两个位置的顶部：28正常工作。 Screenshot is attached. 屏幕截图已随附。 在此处输入图片说明

Answer 3

Are you expecting something like this LINK 您是否期望这样的链接

some changes in your CSS : 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上将padding和margin设置为0，因为浏览器呈现的方式不同（即使未设置）。

绝对定位的div

问题描述

4 个解决方案

解决方案1
0 2013-05-31 05:27:49

解决方案2
0 2013-05-31 05:35:10

解决方案3
0 2013-05-31 05:50:54

解决方案4
0 2013-05-31 07:23:51

绝对定位的div

问题描述

4 个解决方案

解决方案1 0 2013-05-31 05:27:49

解决方案2 0 2013-05-31 05:35:10

解决方案3 0 2013-05-31 05:50:54

解决方案4 0 2013-05-31 07:23:51

解决方案1
0 2013-05-31 05:27:49

解决方案2
0 2013-05-31 05:35:10

解决方案3
0 2013-05-31 05:50:54

解决方案4
0 2013-05-31 07:23:51