3

我正在尝试实现一个 div，它看起来像一个又高又窄的页面，就像笔记本纸一样。

我有我的内容，<div id='centerframe'/>我认为一个好的解决方案是为“纸张”使用绝对定位的 div。

所以我写了如下的css规则：

div#center_background
{
    z-index:-1;
    position:absolute;
    top:0;
    left:130px;
    width:900px;
    height:100%;
    background:rgba(255,255,255,0.9);
}

但是，当我向正文添加背景图像时，它会在背景下消失。我尝试设置一个正的 z-index，而不是它呈现在页面中所有内容的顶部，例如 centerframe、topbar 等。参见图片：

一个解决方案可能是为所有元素设置 z-index，我真的不想这样做，因为我想position:absolute;尽可能少地使用 's。

那么如何在不改变其他元素的位置和 z-indices 的情况下定义这种背景 div 呢？

我做了一个小提琴，但它按预期运行。在我的真实代码中奇怪的是，当我加载页面时，center_backgrounddiv 出现在 body 的背景上，一目了然，然后消失了。我不会用 JavaScript 改变任何东西。

4

3 回答 3

2

几天前我在自己的代码中遇到了这个问题，并设置了包含元素来position: relative解决这个问题。

于 2013-06-14T12:20:49.017 回答
1

当我看到你的照片时，我认为绝对定位是不必要的。你可以使用fixed作为标题，让主要内容在它下面滑动：http:
//jsfiddle.net/jgYXr/ 

body {
    background:url(http://lorempixel.com/100/100/abstract/10);
}
nav {
    position:fixed;
    top:0;
    left:0;
    right:0;
    line-height:3em;
    background:tomato;
    box-shadow:0 0 1em 0.5em;
    text-align:right;
}
a {
    display:inline-block;
    margin:0 0.5em;
    padding:0 0.25em;
}
main {
    width:80%;
    background:rgba(255, 255, 255, 0.75);
    box-shadow:0 0 1em 0.3em;
    margin:2em auto;
    min-height:800px;
}

<nav> 
  <a href="#">Nav link</a>
  <a href="#">Nav link</a>
  <a href="#">Nav link</a>
</nav>
<main>
</main>

搜索位置：固定以及如何通过坐标以绝对或固定的方式调整元素的大小。另请参阅设置只有 1 行文本的 1 个元素的高度。

于 2013-06-14T12:20:24.343 回答
0

将 z-index 值置于高范围内 

  div#center_background
    {
    z-index:100;
    position:absolute;
    top:0;
    left:130px;
    width:900px;
    height:100%;
    }
于 2013-06-14T11:59:28.973 回答