Question

我目前正在使用几个div来设置背景样式以及为悬停设置叠加样式。问题是我想创建一个额外的div，这样我也可以在悬停时设置一个方框，但是我不知道在HTML中放置新div而不会搞砸我的格式（类.captionbox例如）。

我的代码和JS Fiddle如下。任何帮助表示赞赏。

body {
        background: url('http://www.bootply.com/assets/example/bg_blueplane.jpg');
        height:100%;
        margin:0;
        padding:0;
    }
    .bg {
        position:fixed;
        width:50%;
        height:50%
    }
    #nw {
        background-image: url('clevelandnight.jpg');
        background-size:cover;
    }
    #ne {
        top:0;
        left:50%;
        background-image: url('news1.jpg');
        background-size:cover;
    }
    #sw {
        top:50%;
        left:0;
        background-image: url('drinks1.jpg');
        background-size:cover;
    }
    #se {
        top:50%;
        left:50%;
        background-image: url('clevelandday.jpg');
        background-size:cover;
    }
    .overlay {
        height:100%;
        text-align:center;
        -webkit-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
        -moz-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
        -o-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
        -ms-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
        transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
    }
    .bg:hover .overlay {
        background:rgba(0, 0, 0, .75);
        opacity: 1;
        height:100%;
    }
    .caption {
        font-family: 'Open Sans Condensed', sans-serif;
        font-weight:100;
        color:white;
        font-size:36pt;
        white-space:nowrap;
        -webkit-transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s;
        -moz-transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s;
        -o-transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s;
        transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s;
    }
    .bg:hover .caption {
        color:#7D7D7D;
        font-size:72px;
        white-space:nowrap;
        margin-right:70%;
    }
    .captionbox {
        height:100px;
        width:100px;
        background-color:white;
        opacity:0;
        border: 5px solid red;
    }

<div id='nw' class='bg'>
    <div class='overlay'>
         <span class='caption'>Night Life</span>
    </div>
</div>
<div id='ne' class='bg'>
    <div class='overlay'>
        <span class='caption'>News</span>
    </div>
</div>
<div id='sw' class='bg'>
    <div class='overlay'>
        <span class='caption'>Food & Drink</span>
    </div>
</div>
<div id='se' class='bg'>
    <div class='overlay'>
        <span class='caption'>Events</span>
    </div>
</div>

Answer 1

如果您创建div display:none，它将不占用页面上的任何空格。我认为它是一个标题框，它将是position: absolute，所以一旦应用了这种风格，它就不会影响你的布局。因此，您应该能够将其作为<body>的孩子放在顶层。

在不破坏当前布局的情况下放置Div的位置

1 个答案: