如何將div固定在絕對定位的另一個div內

在懸停事件上，我顯示了一個具有絕對定位的div，該div的底部我需要一個固定的div。如何將div固定在絕對定位的另一個div內

看看我想要達到的圖像。此 Div image

我有以下代碼：

CSS

.showpro{position:absolute;z-index:999;width:500px;height:auto;display:none;max-height:500px;} 
.bottom{width:500px;position:fixed;bottom:0;left:0;}

CODE

<div class='showpro'> 
    <div class='top'> 

    </div> 
    <div class='bottom'> 

    </div> 
</div>

有了這個代碼，它是在div容器的左下角。有誰可以說爲什麼？任何幫助？

來源

2014-11-14 Shanil Soni

元素position: fixed始終相對於瀏覽器窗口定位。嘗試使用position: absolute作爲該「固定」元素。

下面是一個顯示您的預期結果的示例。

.container{ 
 
    position:relative; 
 
    width:100vw; 
 
    height:100vh; 
 
    background-color:brown; 
 
} 
 
.showpro{ 
 
    position:absolute; 
 
    z-index:999; 
 
    width:200px; 
 
    height:auto; 
 
    max-height:300px; 
 
    padding-bottom:80px; 
 
    overflow:hidden; 
 
    background-color:red; 
 
    right:0; 
 
} 
 
.top{ 
 
    overflow:auto; 
 
    max-height:220px; 
 
    margin-right: 20px; 
 
} 
 
.bottom{ 
 
    width:200px; 
 
    position:absolute; 
 
    bottom:0; 
 
    left:0; 
 
    height:80px; 
 
    background-color:green;}

<div class="container"><div class='showpro'> 
 
    <div class='top'> 
 
Here can be a lot of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
    <div class='bottom'> 
 
This is the "fixed" element. 
 
    </div> 
 
</div></div>

來源

2014-11-14 07:44:36 Paul

對不起，我忘了提到，max-height是爲div提供的。因此，對於絕對定位，如果內容超出所提供的最大高度，FIXED Div會停留在中間位置。上面有一些內容，下面有一些內容 –

然後請更新您的問題以更好地反映情況。 – Paul

我編輯了CSS –

改變位置以相對於主DIV中兩個主DIV和DIV：

實施例：使用此CSS代碼

#four { 
    background-color: blue; 
    height: 200px; 
    position: relative; 
    top: 50px; 
    width: 100px; 
}

來源

2014-11-14 07:47:53

如何將div固定在絕對定位的另一個div內

回答

相關問題