哪裏可以放置div而不破壞當前佈局

我目前使用幾個div來設置我的背景以及懸停時的疊加樣式。問題是，我想創建一個額外的div，以便我可以在懸停上設置一個方框，但我不確定將新div放在HTML中的位置，而不會將其擰到我的格式（class .captionbox例如）。哪裏可以放置div而不破壞當前佈局

我的代碼和JS小提琴在下面。任何幫助表示讚賞。

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>

來源

2014-09-23 czmudzin

想要簡化標記嗎？ [這是一個例子]（http://jsbin.com/joraw/1/edit）。 – misterManSam 2014-09-23 02:28:43

是的，我會比較你的代碼和我的。爲了學習CSS，我正在構建一個站點，所以我肯定需要學習如何整合。謝謝。 – czmudzin 2014-09-23 02:33:17

很酷，在我的例子中，div的每個部分浮動到左邊。因爲它們每個都佔用50％的寬度和高度，所以每個div都可以獲得視口尺寸的1/4。 'html，body {height：100％; }'允許每個div有它的百分比高度。 – misterManSam 2014-09-23 02:36:16

如果您在div display:none它不會佔用頁面上的任何空間。我認爲作爲標題框它將是position: absolute，所以一旦應用了這種風格，它不會影響你的佈局。所以你應該能夠把它作爲<body>的孩子的頂級水平。

來源

2014-09-23 01:54:46 ryansilva

這確實奏效，所以我感謝你的幫助。然而，它把我的文本放在盒子裏。我怎樣才能避免這種情況發生？ – czmudzin 2014-09-23 02:14:56

你能更新小提琴以顯示問題嗎？很難想象發生了什麼。 – ryansilva 2014-09-23 02:16:03

http://jsfiddle.net/ns47qwn3/ – czmudzin 2014-09-23 02:17:25

哪裏可以放置div而不破壞當前佈局

回答

相關問題