CSS絕對定位和調整窗口大小

Question

首先讓我說，我不做了一大堆的前端設計，所以請原諒我所有的內嵌代碼等..

我已經建立了這些複選框點擊時能夠包含圖像。我知道這不在父級內部，但在如何前進的這一點上我有點困惑。由於它沒有父類，它只是尋找整個網頁，因爲它是我假設的父類。

相當簡單，我想;當我最小化我的屏幕時，我的標籤定位將自己從盒子中取出並漂浮。爲了更加清晰，我會附上屏幕截圖。

我試圖把它們中的一些在divs取得一些成功，但我不是100％確定這樣做的正確方法，這就是爲什麼我在這裏。我也嘗試過一些相對定位。

<div class="interests"> 
<div class="subHeader">Interests:</div> 

<label style="background-color: #000; color:#fff; width:160px; font-family: 'itc_avant_garde_gothic_ltbold'; 
    font-size: 18px !important; 
    text-transform: uppercase; 
    color: #FFF; 
    padding-top: 20px; 
    display: inline-block; z-index: 5; position:absolute; left: 465px; top: 1105px;"><div style="position:relative;left:10px; bottom: 8px;">SKATE</div></label> 

<label style="background-color: #000; color:#fff; width:160px; font-family: 'itc_avant_garde_gothic_ltbold'; 
    font-size: 18px !important; 
    text-transform: uppercase; 
    color: #FFF; 
    padding-top: 20px; 
    display: inline-block; z-index: 5; position:absolute; left: 685px; top: 1105px;"><div style="position:relative;left:10px; bottom: 8px;">SURF</div></label> 

<label style="background-color: #000; color:#fff; width:160px; font-family: 'itc_avant_garde_gothic_ltbold'; 
    font-size: 18px !important; 
    text-transform: uppercase; 
    color: #FFF; 
    padding-top: 20px; 
    display: inline-block; z-index: 5; position:absolute; left: 906px; top: 1105px;"><div style="position:relative;left:10px; bottom: 8px;">SNOW</div></label> 

<label style="background-color: #000; color:#fff; width:160px; font-family: 'itc_avant_garde_gothic_ltbold'; 
    font-size: 18px !important; 
    text-transform: uppercase; 
    color: #FFF; 
    padding-top: 20px; 
    display: inline-block; z-index: 5; position:absolute; left: 465px; top: 1300px;"><div style="position:relative;left:10px; bottom: 8px;"> WOMEN</div></label> 


<label style="background-color: #000; color:#fff; width:160px; font-family: 'itc_avant_garde_gothic_ltbold'; 
    font-size: 18px !important; 
    text-transform: uppercase; 
    color: #FFF; 
    padding-top: 20px; 
    display: inline-block; z-index: 5; position:absolute; left: 685px; top: 1300px;"><div style="position:relative;left:10px; bottom: 8px;"> MUSIC/ART </div></label> 

<label style="position: relative; top: 90px;"> 
<input type="checkbox" name="CheckBox.A address.Sk" style="z-index: 1;position: relative; top:4px;">Skate<img src="https://stuff/Images/thumb.jpg" style="position: absolute;left: 0;bottom: 0;height: 185px;width: 205px;"> 
</label> 
<input type="hidden" name="CheckBox.A address.Sk" value="off"> 


<label style="position: relative; left:140px; top: 90px;"> 
<input type="checkbox" name="CheckBox.A address.Su" style="z-index: 1;position: relative; top:4px;">Surf<img src="https://stuff/Images/thumb.jpg" style="position: absolute;left: 0;bottom: 0;height: 185px;width: 205px;"> 
</label> 
<input type="hidden" name="CheckBox.A address.Su" value="off"> 


<label style="position: relative; left:290px; top: 90px;"> 
<input type="checkbox" name="CheckBox.A address.Sn" style="z-index: 1;position: relative; top:4px;">Snow<img src="https://stuff/Images/thumb.jpg" style="position: absolute;left: 0;bottom: 0;height: 185px;width:205px;"> 
</label> 
<input type="hidden" name="CheckBox.A address.Sn" value="off"> 

<br><br><br><br><br><br><br><br><br><br><br><br> 

<label style="position:relative; top: 60px;"> 
<input type="checkbox" name="CheckBox.A address.Wo" style="z-index: 1;position: relative; top:4px;">Women<img src="https://stuff/Images/thumb.jpg" style="position: absolute;left: 0;bottom: 0;height: 185px;width:205px;"> 
</label> 
<input type="hidden" name="CheckBox.A address.Wo" value="off"> 


<label style="position:relative; left: 130px; top: 60px;"> 
<input type="checkbox" name="CheckBox.A address.Mu" style="z-index: 1;position: relative; top:4px;">Music<img src="https://stuff/Images/music_thumb.jpg" style="position: absolute;left: 0;bottom: 0;height: 185px;width:205px;"> 
</label><input type="hidden" name="CheckBox.A address.Mu " value="off"> 


<label><input type="checkbox" name="CheckBox.A address.Subscribe"></label> 
<div style="position:relative; left: 50px; bottom: 33px;">Subscribe</div> 
<input type="hidden" name="CheckBox.A address.Subscribe" value="off"> 


     <input type="submit" id="submit" value="Sign Up" style="width: 280px; 
    height: 45px; 
    display: block !important; 
    outline-style: none !important; 
    outline-width: 0px !important; 
    color: #fff !important; 
    font-weight: normal !important; 
    font-family: 'itc_avant_garde_gothic_ltbold'; 
    text-transform: uppercase; 
    text-decoration: none; 
    text-align: center; 
    border: 1px solid #434242; 
    background-color: #434242; 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#434242), to(#2f2e2e)); 
    background-image: -webkit-linear-gradient(top, #434242, #2f2e2e); 
    background-image: -moz-linear-gradient(top, #434242, #2f2e2e); 
    background-image: -ms-linear-gradient(top, #434242, #2f2e2e); 
    background-image: -o-linear-gradient(top, #434242, #2f2e2e); 
    -moz-box-shadow: 0 0 1px #bbb; 
    -webkit-box-shadow: 0 0 1px #bbb; 
    box-shadow: 0 0 1px #bbb; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    vertical-align: middle; 
    padding: 10px 0; 
    line-height: 1em; 
    cursor: pointer; 
    line-height: 18px; 
    font-size: 18px; 
    margin: 40px 0;"> 


</div> 

任何幫助將不勝感激。謝謝。下面的屏幕截圖。

標籤被浮起時，我儘量減少：

正常工作時，全屏：

Answer 1

我評論與另一個回答幾個壞的做法和謊言，所以我真的不得不自己做一個快速的例子，這是用flexbox做的一個方法（這個問題有很多解決方案，如果你不需要支持，這是一個很好的解決方案噸過時的瀏覽器）：

實施例：https://jsfiddle.net/um6fm744/1/

CSS：

* { box-sizing: border-box; margin: 0; padding: 0; } 

.interests { 
    display: flex; 
    flex-wrap: wrap; 
} 
.sub-header { 
    margin: 0 0 24px; 
    width: 100%; 
} 

.interest { 
    align-items: flex-end; 
    background-color: green; 
    display: flex; 
    margin: 0 12px 24px 0; 
    min-height: 160px; 
    width: 160px; 
} 

.interest-info { 
    background-color: black; 
    display: flex; 
    justity-content: space-between; 
    width: 100%; 
} 

.interest-checkbox { 
    height: 30px; 
    width: 30px; 
} 

.interest-label { 
    color: white; 
    font-family: sans-serif; 
    flex: 1; 
    height: 30px; 
    line-height: 30px; 
    margin-left: 12px; 
} 

HTML

<div class="interests"> 
    <h1 class="sub-header">Interests:</h1> 

    <div class="interest"> 
     <div class="interest-info"> 
     <input class="interest-checkbox" type="checkbox" /> 
     <label class="interest-label">SKATE</label> 
     </div> 
    </div> 

    <div class="interest"> 
     <div class="interest-info"> 
     <input class="interest-checkbox" type="checkbox" /> 
     <label class="interest-label">SNOW</label> 
     </div> 
    </div> 

    <div class="interest"> 
     <div class="interest-info"> 
     <input class="interest-checkbox" type="checkbox" /> 
     <label class="interest-label">WOMEN</label> 
     </div> 
    </div> 

    <div class="interest"> 
     <div class="interest-info"> 
     <input class="interest-checkbox" type="checkbox" /> 
     <label class="interest-label">SURF</label> 
     </div> 
    </div> 

    <div class="interest"> 
     <div class="interest-info"> 
     <input class="interest-checkbox" type="checkbox" /> 
     <label class="interest-label">MUSIC/ART</label> 
     </div> 
    </div> 

</div> 

Answer 2

，請不要使用內聯樣式。

我會更喜歡這種解決它：http://codepen.io/anon/pen/VeEXEv

HTML：

<ul class="items"> 
    <li class="item1"> 
    <button class="add-button">+</button> 
    <span class="description">box 1</span> 
    </li> 
    <li class="item2"> 
    <button class="add-button">+</button> 
    <span class="description">box 2</span> 
    </li> 
    <li class="item3"> 
    <button class="add-button">+</button> 
    <span class="description">box 3</span> 
    </li> 
    <li class="item2"> 
    <button class="add-button">+</button> 
    <span class="description">box 2</span> 
    </li> 
    <li class="item3"> 
    <button class="add-button">+</button> 
    <span class="description">box 3</span> 
    </li> 
    <li class="item1"> 
    <button class="add-button">+</button> 
    <span class="description">box 1</span> 
    </li> 
</ul> 

CSS：

.items > li { 
    list-style: none; 
    float: left; 
    height: 20px; 
    width: 100px; 
    margin: 10px; 
    border: 1px #000 solid; 
    position: relative; 
    padding-top: 80px; 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
} 

.items .description { 
    background: rgba(0,0,0,0.8); 
    height: 20px; 
    width: 80px; 
    color: #fff; 
    display: block; 
    float: right; 
    text-align: center; 
} 

.items .add-button { 
    width: 20px; 
    height: 20px; 
    border: none; 
    background-color: #666; 
    color: #fff; 
} 

.item1 { 
    background-image: url(https://pbs.twimg.com/profile_images/586137164188004352/wTK4hjbl.jpg); 
} 

.item2 { 
    background-image: url(https://pbs.twimg.com/profile_images/3276050019/f1d244a9f3254f30176922985c761d28.png); 
    } 

.item3 { 
    background-image: url(https://people.rit.edu/~bmd6715/230/exercises/images/cat.png); 
    }