将容器绝对定位在其他容器内答案

【问题标题】：Absolute positioning a container inside other containers将容器绝对定位在其他容器内
【发布时间】：2014-07-16 21:10:04
【问题描述】：

我想将此“描述”容器放置在这些其他容器中。我的问题是，由于它的绝对定位，它溢出了我的主容器。

这是正在发生的事情的屏幕截图。

Screenshot

HTML

<div id="inventorycont">
 <div class="Content">
  <div class="cattitle">Trucks</div>

  <div id="container3">
    <a href="/Trucks/70017/70017.html"><img class="itemthumb" src="/Trucks/70017/70017.JPG" alt=""></a>
    <div class="Itemtitle">
    <div class="main"> GMC Dump Truck </div>
    <br>
    <b>Stock #:</b> 70017
    <br>
    <b>Price:</b> Call
    <br><br>
    <a href="/Trucks/70017/70017.html"><b>Full Details</b></a> 
    </div>
    <div id="container4">
    <div class="Itemdesc">
    <b>Description:</b><br>1989 GMC Dump Truck, Model 7000 Top Kick, 3280T Cat Diesel, 10spd. Roadranger, Tag Axle, 20' Lined Box, Hydraulic Winch, 46000# GVWR, Only 68427 Miles
    </div>
    </div>
  </div>

  <div id="container3">
    <a href="/Trucks/12017/12017.html"><img class="itemthumb" src="/Trucks/12017/12017.jpg" alt=""></a>
    <div class="Itemtitle">
    <div class="main"> Peterbilt Truck Tractor </div>
    <br>
    <b>Stock #:</b> 12017
    <br>
    <b>Price:</b> Call
    <br><br>
    <a href="/Trucks/12017/12017.html"><b>Full Details</b></a> 
    </div>
    <div id="container4">
    <div class="Itemdesc">
    <b>Description:</b><br>Truck Tractor, NTC 350 Cummins, 13 spd. Roadranger, Like New
    </div>
    </div>
  </div>

    <div id="container3">
    <a href="/Trucks/80004/80004.html"><img class="itemthumb" src="/Trucks/80004/80004.jpg" alt=""></a>
    <div class="Itemtitle">
    <div class="main"> International Truck Tractor </div>
    <br>
    <b>Stock #:</b> 80004
    <br>
    <b>Price:</b> Call
    <br><br>
    <a href="/Trucks/80004/80004.html"><b>Full Details</b></a> 
    </div>
    <div id="container4">
    <div class="Itemdesc">
    <b>Description:</b><br>International 8100, 6 spd, DT 466 Engine
    </div>
    </div>
  </div>

 </div>
</div>

CSS

/*Inner Item Container*/
#container3 {
    position: abosolute;
    width: 750px;
    height: 150px;
    overflow: hidden;
    margin-top: 15px;
    margin-right: 0px;
    background: #ffffff;
    border: 2px solid #000000;
}

/*Outer Container*/
#inventorycont {
    width: 800px;
    height: 510px;
    overflow: hidden;
    margin-top: 5px;
    margin-right: 30px;
    background: #EEEEEE;
    border: 3px solid #000000;
}

/*Inner Item Container for description*/
#container4 {
    position: absolute;
    width: 300px;
    height: 95px;
    overflow: hidden;
    margin-top: 50px;
    margin-left: 400px;
    margin-right: 5px;
    background: #ffffff;
    border: 1px solid #000000;
    float:left;
}

【问题讨论】：

同时发布您的 HTML。一个 jsFiddle.net 示例可能很有用。顺便说一句，为什么你需要绝对定位这些元素？
这就是绝对定位的工作方式。元素不再是正常文档流的一部分，它们不再真正包含在它们的父级中（即父级不会扩展以容纳元素）
这个大概可以通过相对定位来解决。
我发布了 html。容器左侧有图片，因此 jdfiddle 不会按应有的方式显示它。
我尝试了相对定位。但是我应该在哪个容器上使用它。当我在“描述”容器上使用它时，它不是我想要的。这就是我使用绝对值的原因。

标签： html css position containers

【解决方案1】：

您需要将position:relative 添加到您的主容器（您希望在其中放置 div），因此绝对位置将相对于它。

【讨论】：

深受好评。谢谢大家。
除了，现在我的下拉菜单隐藏在那个主容器后面。解决办法是什么？