我是 CSS 初学者。 我想要一个包含主要内容的半透明居中 div。它下面应该是一个包含目录的固定 div。
下面是我的尝试。这适用于特定的浏览器大小。但是当浏览器窗口的大小发生变化时，目录也会移动。
我希望目录与主 div 保持固定距离。
有了这个窗口大小，一切看起来都很好:
减小窗口大小将 toc 移动到内容 div 下:
html
<html>
<head>
<title>Testpage</title>
<link rel='stylesheet' href='css/testpage.css'>
</head>
<body>
<div id="contenttable">
<h1>Contents</h1>
<a href="#">Content 01</a><br>
</div>
<div id="content">
some text
</div>
</body>
</html>
CSS:
#content{
height: 1000px;
width: 320px;
position: relative;
top: 50px;
left: 50%;
margin-left: -160px;
background-color: cyan;
}
#contenttable{
padding: 12px;
width:100%;
height:200px;
position: fixed;
background-color: yellow;
top: 125px;
left: 6%;
}
#contenttable a{
position: relative;
top: 0px;
left: 66%;
}
#contenttable h1{
position: relative;
top: 0px;
left: 66%;
}
最佳答案
您可以使用内部 div absolute定位在 fixed TOC 内，并设置其位置。
使用 CSS3 Calc 为您的主要内容制定正确的位置。
使用 opacity 实现透明，避免设置主要内容 div 的 height 进行自动溢出处理。
演示:http://jsfiddle.net/vMAQz/1/
CSS
#contenttable {
padding: 12px;
width:100%;
height:200px;
position: fixed;
background-color: yellow;
top: 125px;
}
#innerContent {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 100px;
padding: 30px;
}
#content {
padding: 10px;
opacity: 0.8;
width: 320px;
position: relative;
top: 50px;
left: calc(100% - 480px);
background-color: cyan;
}
HTML
<div id="contenttable">
<div id="innerContent">
<h1>Contents</h1>
<a href="#">Content 01</a>
<br/>
</div>
</div>
<div id="content">
some text
</div>
关于html - 相对于居中内容 div 的固定位置 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14468629/