Div覆蓋層高度問題

我有一個覆蓋div在另一個div內的情況。

爲什麼主div不適合高度尺寸，當我在內部div中使用位置相對來創建覆蓋。

See the picture 我不能使用position：absolute，因爲我需要在主div內工作的滾動。

看到代碼：

div.main 
 
    { 
 
     \t width: 300px; height: auto; 
 
    \t border: solid 1px black; overflow: auto; 
 
    } 
 
\t div.box1 
 
    { 
 

 
     \t width: 350px; height: 50px; border: solid 1px red; 
 
    } 
 
\t div.box2 
 
    { 
 

 
    \t position: relative; top: -52px; left: 0px; z-index: 1; 
 
    \t width: 350px; height: 50px; border: solid 1px green; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
<div class="main"> 
 
\t <div class="box1">box 1</div> 
 
\t <div class="box2">box 2 - overlay</div> 
 
</div> 
 
</body> 
 
</html>

我可以使用另一種CSS設置，但我需要正弦內的div滾動。

來源

2017-10-18 Fabio Alves Francelino

因爲這是它的正常/自然的位置，好歹它就像它仍然存在，雖然它不是相對定位。 – VXp

如果我正確理解你的問題，這是你所需要的：

div.main 
 
    { 
 
     \t width: 300px; height: auto; 
 
    \t border: solid 1px black; overflow: auto; 
 
     
 
    position: relative; 
 
    } 
 
\t div.box1 
 
    { 
 

 
     \t width: 350px; height: 50px; border: solid 1px red; 
 
    } 
 
\t div.box2 
 
    { 
 

 
    \t position: absolute; 
 
    top: 0; 
 
    left: 0px; 
 
    z-index: 1; 
 
    width: 350px; 
 
    height: 100%; 
 
    background: rgba(0,0,0,0.5); 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
<div class="main"> 
 
\t <div class="box1">box 1</div> 
 
\t <div class="box2"></div> 
 
</div> 
 
</body> 
 
</html>

來源

2017-10-18 22:08:31 izulito

position: relative仍保持免費爲其元素的原始空間 - 它只是從原來的移動單元分離位置由上/下/左/右值。但是，如果沒有這些設置，可用空間仍然存在。具有自動高度的包裝容器就好像相對定位的元件仍處於其原始位置，導致您在問題中提出的問題。

因此，如果您想強制使用解決方案，則必須在容器元素上使用固定高度和overflow-y: hidden。

div.main { 
 
    width: 300px; 
 
    height: 52px; 
 
    border: solid 1px black; 
 
    overflow-y: hidden; 
 
} 
 

 
div.box1 { 
 
    width: 350px; 
 
    height: 50px; 
 
    border: solid 1px red; 
 
} 
 

 
div.box2 { 
 
    position: relative; 
 
    top: -52px; 
 
    z-index: 1; 
 
    width: 350px; 
 
    height: 50px; 
 
    border: solid 1px green; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <div class="main"> 
 
    <div class="box1">box 1</div> 
 
    <div class="box2">box 2 - overlay</div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-10-18 22:18:03 Johannes

我解釋過，是的。這個問題沒有真正的解決方案，只是一個答案，爲什麼它不能像OP期望的那樣工作，並且是一個解決方法來迫使它按預期行事。 – Johannes

Div覆蓋層高度問題

回答

相關問題