Question

以下代码有什么问题？我已经尝试了所有问题和建议，但似乎没有任何效果。我知道这是非常基本的，但无法弄清楚为什么..这似乎在jsfiddle中工作..但是在Chrome上无法在本地工作。 html和css文件都在同一个文件夹中。

<html>
    <head>
        <title></title>
       <link rel='stylesheet' type='text/css' href='acc.css' />
       </head>
    <body>

    <div class='topbar'>temp</div>
    <div class='maincontainer'><div>
    </body>
</html>

acc.css文件：

.topbar {
    height: 200px;
    background-color: skyblue;
    width: 100%;

}

.maincontainer {
    width: 100%;
    background-color: yellow;
    height: 200px;

}

Answer 1

div position:absolute都有left:0;他们正在使用默认样式top:0 relative只需更改默认样式并参阅

因为他们没有任何position定位元素，所以div正在与窗口对齐

只需更改任何一个元素的默认div，您就会看到内容

我已将其中一个position right:0更改为{{1}}

演示 - http://jsfiddle.net/xr1kw68n/

Answer 2

您的div与绝对内容具有相同的来源，内容（temp文本）位于＆＃39;黄色＆＃39; div：

请参阅http://jsfiddle.net/237429er/

我在黄色div上添加了不透明度，因此您可以看到正在发生的事情：

.maincontainer{
  width: 200px;
  clear: both;
  position: absolute;
  background-color: yellow;
  height: 200px;
  opacity: 0.5;
}

Answer 3

如果你想让你的两个div并排，你需要浮动每个div并将位置从position:absolute更改为position: relative（同样，目前你的div以相反的顺序显示，下面的代码将首先显示mainbar，然后是maincontainer）

请尝试使用此CSS：

.mainbar{
    height: 200px;
    background-color: skyblue;
    width: 500px; 
    float: left;    
    position: relative;      
}

.maincontainer{
    width: 200px;
    float: left;
    position: relative;
    background-color: yellow;
    height: 200px;
}

Answer 4

使用时

position: absolute;

使用顶部和左侧来定位元素。

例如：

position: absolute;  
top: 100px;  
left: 100px;

Div内容不可见

4 个答案: