Fatal编程技术网
  • css/
  • Css 绝对定位div嵌套在另一个绝对定位div中的问题

Css 绝对定位div嵌套在另一个绝对定位div中的问题

css

Css 绝对定位div嵌套在另一个绝对定位div中的问题,css,css-position,Css,Css Position,我不是CSS专家，尤其是在定位方面，我希望这个问题很容易解决 以下是我的简化HTML： <body> <div style="height:100%;width:100%;"> <div id="map" style="bottom:250px;height:100%;overflow:hidden;position:absolute;width:100%;"> <!-- The controls div

我不是CSS专家，尤其是在定位方面，我希望这个问题很容易解决

以下是我的简化HTML：

<body>
    <div style="height:100%;width:100%;">
        <div id="map" style="bottom:250px;height:100%;overflow:hidden;position:absolute;width:100%;">
            <!-- The controls div does not render correctly. -->
            <div id="controls" style="left:10px;position:absolute;top:10px;">
            </div>
            <!-- The legend and logos divs do render correctly. -->
            <div id="legend" style="bottom:45px;left:10px;position:absolute;">
            </div>
            <div id="logos" style="bottom:5px;left:10px;position:absolute;">
            </div>
        </div>
        <div id="search" style="bottom:0;height:250px;position:absolute;width:100%;">
        </div>
    </div>
</body>
“controls”div未正确渲染。事实上，它根本不显示。如果我取出“top:10px；”样式，并将其替换为“bottom:400px；”，它确实可以正确渲染。不过，这不是我想要的，因为如果用户调整浏览器窗口的大小，“map”div的高度就会调整。我也不想使用JavaScript来定位div

“图例”和“徽标”div都正确渲染

我正在Firefox中进行测试。

您只需将父级div的位置设置为
相对
和子级
绝对
。下面将解释此CSS技巧：


    

  • 

      以下是我的结局。谢谢Sarfraz和sholsinger为我指引了正确的方向：
      

      <body>
    <div style="height:100%;width:100%;">
        <div style="bottom:250px;position:absolute;top:0;width:100%">            
            <div id="map" style="height:100%;overflow:hidden;position:relative;width:100%;">
                <div id="controls" style="left:10px;position:absolute;top:10px;">
                </div>
                <div id="legend" style="bottom:45px;left:10px;position:absolute;">
                </div>
                <div id="logos" style="bottom:5px;left:10px;position:absolute;">
                </div>
            </div>
        </div>
        <div id="search" style="bottom:0;height:250px;position:absolute;width:100%;">
        </div>
    </div>
</body>

      

      

      
所以我基本上只是将“map”div嵌套在绝对定位的div中，并将其设置为“position；relative；”
      
我第一次发布的示例中有两个问题：
      

    • 正如sholsinger所指出的，我的“map”div的高度被设置为100%，这就是将div调整为浏览器窗口的100%。“bottom:250px；”只是将div向上推离页面。这导致控件在屏幕外渲染。我可以简单地在“控件”（“margin-top:260px；”）上设置一种新样式，以使显示器正常工作，但这并不能正确地解决根本问题
      • 

    • 正如Sarfraz所指出的，“map”div需要在其上定义“position:relative；”，这样绝对位置的控件才能正确显示
      • 

      上面的修复解决了这两个问题。
      没错，但如果我将“贴图”设置为“位置：相对”，则无法正确渲染。同意。
      #controls
      div可能正在渲染，但您在父级上有
      溢出：隐藏
      ，因此它在父级之外绘制，因此不会显示。此外，如果父div
      #map
      扩展到页面顶部以外的
      250px
      （如果CSS呈现正确，则应该是这样）然后，控件也会离开屏幕。@Nate:如果您删除
      底部：250px
      ，然后在
      div#map
      上更改
      位置：relative
      ，那么内部div应该在您想要的位置。@sholsinger:我尝试了更改（在div#map上设置“position:relative；”，然后删除“bottom:250px；”），但这会导致贴图填充整个窗口。“高度：100%”表示它获得其父级的完整高度，即浏览器窗口的完整高度。也就是说，控件现在呈现在我希望它们呈现的地方。@sholsinger:不过，你说的很有道理；我确实认为控件渲染正确。它们只是在浏览器视口上显示250px。