我有两个绝对位置的按钮在一个绝对位置的容器上。看起来不错，但是当我调整窗口大小时，按钮会一个一个地显示在另一个上面。如果边距小于 10px，如何让第二个按钮转到下一行？
这是我的 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="one/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div id="map-canvas" class="jumbotron" style="position: relative"></div>
<div class="jumbotron" style="position: relative"></div>
<div style="position: absolute; top: 65%;">
<a href="two/index.html" class="btn btn-default btn-lg" style="margin: 30px;">Two Explorers</a>
</div>
<div style="position: absolute; top: 65%">
<a href="one/index.html" class="btn btn-default btn-lg" style="margin: 30px;display:block ">One Explorer</a>
</div>
<div id="overlay" style="height: 50%;display: table;">
<div class="container" style="display: table-cell;vertical-align: middle;width:100%; text-align: center">
<h1>The Demo of The Band to the Pole</h1>
<h3>Select the version you want to see</h3>
</div>
</div>
</body>
</html>
它基于 CSS 的 Bootstrap。我添加了这个 id:
#map-canvas {
height: 100vh;
position: relative;
margin:0px;
background: transparent no-repeat 1 1;
}
#overlay {
top:0px;
background: #fff;
opacity: .8;
position: absolute;
padding: 10px;
margin: auto;
width: 100%;
}
最佳答案
- 停止使用内联
样式。这比您想象的要糟糕得多，因为迟早您将需要在整个站点范围内修改您的元素，此时您将开始寻找内联代码，而不是通过一行代码修改所有元素。
你会讨厌它。 - 当两个或多个元素相互关联时，不要对每个元素使用
position:absolute。相反，将它们随意放置在父级(包装器)中，并绝对定位父级。
如果您需要代码的实际示例，请提供 minimal, complete and verifiable example你的问题。 (将 CSS 和其余资源添加到您的代码段中，直到我们能够遇到您所描述的问题 - 一般来说，当您需要图片来描述您在 SO 上的问题时，您做错了).
用这个替换你的按钮部分:
<div class="overlayButtons">
<a href="two/index.html" class="btn btn-default btn-lg">Two Explorers</a>
<a href="one/index.html" class="btn btn-default btn-lg">One Explorer</a>
</div>
并将其添加到您的 CSS 中:
.overlayButtons {
position: absolute;
top: 65%;
padding: 30px;
left: 0;
right: 0;
text-align: center;
}
.overlayButtons .btn-lg {
margin: 5px 10px;
min-width: 150px;
}
演示:
body {margin: 0;}
#map-canvas {
height: 100vh;
position: relative;
margin: 0px;
background: transparent no-repeat 1 1;
}
#overlay {
top: 0;
background: #fff;
opacity: .8;
position: absolute;
padding: 10px;
margin: auto;
width: 100%;
}
.overlayButtons {
position: absolute;
top: 65%;
padding: 30px;
left: 0;
right: 0;
text-align: center;
}
.overlayButtons .btn-lg {
margin: 5px 10px;
min-width: 150px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div id="map-canvas" class="jumbotron" style="position: relative"></div>
<div class="overlayButtons">
<a href="two/index.html" class="btn btn-default btn-lg">Two Explorers</a>
<a href="one/index.html" class="btn btn-default btn-lg">One Explorer</a>
</div>
<div id="overlay" style="height: 50%;display: table;">
<div class="container" style="display: table-cell;vertical-align: middle;width:100%; text-align: center">
<h1>The Demo of The Band to the Pole</h1>
<h3>Select the version you want to see</h3>
</div>
</div>注意:您的标记可以使用一些改进。如果您提供它的实时版本的链接，我可以提出一些建议。
关于html - 具有绝对位置的覆盖元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34645017/