Question

我是CSS初学者。我想要一个半透明的居中div与主要内容。下面应该是一个包含目录的固定div。

以下是我对此的尝试。这适用于某种浏览器大小。但是当浏览器窗口的大小发生变化时，内容表会移动。

我希望目录与主div保持固定的距离。

使用此窗口大小一切正常： with this window size everything looks ok

减小窗口大小会在内容div下移动toc： decreasing the window size moves toc under content 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%;
}

Answer 1

您可以使用位于absolute TOC内的内部div fixed，并设置其位置。

使用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>

Answer 2

您需要做的就是更改内容div的宽度

#content{
    height: 1000px;
    width:  30%;
    position: relative;
    top: 50px;
    left: 50%;
    margin-left: -160px;
    background-color: cyan;
        }

固定位置div相对于居中内容div？

2 个答案: