Question

我有重叠DIVS的问题。尝试了一些事情，但没有一个提供了预期的结果。我怀疑这很容易，但我错过了关键因素。

目前宾果游戏div与数字div重叠。在许多屏幕上，数字div甚至不可见，因为宾果游戏占用了整个屏幕

HTML：

<body>
    <div class="numbers" style="height:100%">
        <h2>
        What sort of number do you want?    
        </h2>
        <a href="a-level/a1.html">Evens</a>
        <a href="a-level/a2.html">Odds</a>
        <a href="a-level/a3.html">Primes</a>
    </div>

    <div class="bingo">
    </div>
</body>

CSS：

html{
    font-size: 100%;
    font-family: sans-serif;
}

h2{
    margin:2rem;    
}

h1{
    margin:-2rem 0 2rem 2rem;
    font-size: 4rem;
}

a{
    margin: 0 0 0 2rem;
    border:solid black 1px;
    padding: 0.618rem 1rem;
    text-decoration: none; 
    color:black;
}

a:hover{
    color: white;
    background-color: black;
}

img{
    position: absolute;
    bottom:0;
}

.bingo{
    bottom:0;
    margin: 4rem 0 0 0;
    width: 100%;
    height: auto;
    overflow: hidden;
}

谢谢！

Answer 1

“数字”<div>取自包含的元素，文本和<a>的高度;关键是<a>元素是inline，其CSS高度只是文本行的高度。如果它们在屏幕上显示为矩形，则只是因为您设置了填充（未添加到父<div>高度）。这导致“宾果”上的矩形重叠，但对于CSS高度没有重叠。解决方案是“数字”<div>占据其内部元素的整个高度，以便使用以下方式“推下”“宾果游戏”<div>：

a {
  ...
    display: inline-block;
    margin-bottom: 2rem;
}

我添加了一个底部边距，以防止他们在屏幕调整大小的单列中互相触碰。

https://jsfiddle.net/hoq97sj5/1/

图像div垂直重叠在div之前

1 个答案: