如何獲得位於頁面左上角和右上角的兩個定位標籤，覆蓋頁面的div和其他div的其他位置？

我打算使用一些JSON來填充內容作爲練習，但是在將最初的HTML放在一起時，我遇到了一個問題，只是嘗試在頁面的任一側都有一對鏈接。我有一個主容器div，裏面有兩個鏈接，還有另外一個div，我將放置JSON內容。如何獲得位於頁面左上角和右上角的兩個定位標籤，覆蓋頁面的div和其他div的其他位置？

這個問題與JSON內容無關，我只是被困在試圖定位兩個標籤的css上。我有身高：100％的HTML，正文，主要容器和第二個div。我得到的最接近的是將兩個標籤左右浮動，然後在主容器上使用overflow：auto，但問題在於，當您縮小頁面時，a標籤會溢出後代div，而且，不管大小如何，頁面底部都有一個奇怪的欄，帶有一個滾動條。

這裏是的jsfiddle：

https://jsfiddle.net/g8qeko98/

下面是HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Checkboxes from JSON</title> 
    <link rel="stylesheet" href="./styles.css"> 
</head> 
<body> 
<div id="main-container"> 
    <a id="home" href="#">Home</a> 
    <a id="details" href="#">Details</a> 
    <div class="checkboxes"> 
    </div> 
</div> 
</body> 
</html>

這裏是我的風格：

html, body { 
    height: 90%; 
    margin: 0; 
    padding: 0; 
} 
body { 
    background: #7FA1E5; 
} 
#main-container { 
    overflow: auto; 
    height: 100%; 
} 
a { 
    background: darkslategray; 
    text-align: center; 
    font-family: calibri; 
    text-decoration: none; 
    margin: 2%; 
} 
#home { 
    box-shadow: 0.5px 0.5px 0.5px black; 
    border-radius: 20px; 
    color: lightblue; 
    float: left; 
} 
#details { 
    box-shadow: 0.5px 0.5px 0.5px black; 
    border-radius: 20px; 
    color: lightblue; 
    float: right; 
} 
.checkboxes { 
    background: #A3B7E5; 
    height: 100%; 
    margin: 5%; 
    box-shadow: 1px 1px 1px black; 
    border-radius: 10px; 
}

來源

2017-03-16 Daniel Hofman

首先，你不需要高度爲90%的html和body。我在底部看不到任何奇怪的酒吧，但我的猜測是你指的是設置這個高度的結果。

其次，您只需要更仔細地設置您的值，以防止項目重疊。

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    background: #7FA1E5; 
 
} 
 

 
#main-container { 
 
    overflow: auto; 
 
    height: 100vh; 
 
} 
 

 
a { 
 
    background: darkslategray; 
 
    text-align: center; 
 
    font-family: calibri; 
 
    text-decoration: none; 
 
    margin: 20px 5%; 
 
} 
 

 
#home { 
 
    box-shadow: 0.5px 0.5px 0.5px black; 
 
    border-radius: 20px; 
 
    color: lightblue; 
 
    float: left; 
 
} 
 

 
#details { 
 
    box-shadow: 0.5px 0.5px 0.5px black; 
 
    border-radius: 20px; 
 
    color: lightblue; 
 
    float: right; 
 
} 
 

 
.checkboxes { 
 
    background: #A3B7E5; 
 
    height: 100%; 
 
    margin: 60px 5%; 
 
    box-shadow: 1px 1px 1px black; 
 
    border-radius: 10px; 
 
}

<div id="main-container"> 
 
    <a id="home" href="#">Home</a> 
 
    <a id="details" href="#">Details</a> 
 
    <div class="checkboxes"> 
 
    </div> 
 
</div>

https://jsfiddle.net/eqpbkozr/

來源

2017-03-16 19:59:40

好感謝。我試圖讓.checkbox div擴展整個頁面。你在主容器上使用了100vh，並完成了所有的工作？另外，如何擺脫垂直滾動條呢？ –

我想你可以在'＃checkboxes'上使用'min-height：80％;'而不是高度。 –

這很好，謝謝！ –

如何獲得位於頁面左上角和右上角的兩個定位標籤，覆蓋頁面的div和其他div的其他位置？

回答

相關問題