标签: css-position

我试图让一个绝对定位的元素出现在另一个元素后面.我已经设置了z-indices,但似乎没有任何影响.我试图在背景中放置的元素是最重要的.

有问题的两个元素都位于容器中,其位置设置为相对.我的理解是,这将创建一组新的堆叠元素,虽然我不确定这是否真的很重要.

HTML:

    <div id="wrapper">
      <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue</p>
        <p>massa, scelerisque non viverra sagittis, egestas nec erat. Aliquam vel</p>
      </div>
      <div id="bg">&nbsp</div>
    </div>

CSS:

      #wrapper {
        background: #fdd;
        position: relative;
        width: 300px;
      }

      #content{
        width: 300px;
        z-index: 100;
      }

      #bg{
        background: #ddf;
        position: absolute;
        bottom: 0;        
        left: 0;
        top: 0;
        width: 40%;
        z-index:1;
      }

你可以在这里看到结果:http://jsfiddle.net/GsG28/

这在Chrome和IE中都有发生,尽管我还没有测试过其他浏览器.我得到的是这样的:

我想要的是文本在蓝色背景之上.

我正在尝试自定义WordPress模板,我有一些接近我想要的方式.最后一个问题是我有一个标题,position:fixed所以它一直漂浮在顶部.它可以工作,但当它漂浮在图像上时,它会在图像后面.如何滚动时让它始终保持在前台？这是一个链接:

http://miller-media.com/glossandglamblog/

谢谢!

这个问题已经被问过很多次了，但解决方案似乎对我不起作用。也许是因为我太迟钝了，无法将简单的解决方案应用于我更“复杂”的情况。

我只需要在页眉 div 下方放置内容 div，然后在其下方放置页脚 div，同时对页眉和页脚 div 使用 100% 宽度。这是在 WordPress 网站中，因此有额外有趣的 div。我尝试过各种溢出：隐藏等。我很好地掌握了绝对定位将 div 移出流程的概念，只是不知道如何解决这种情况。我还尝试将顶部位置应用于内容 div，但这对页脚 div 没有帮助。

任何帮助将不胜感激。如果还有其他方法可以做到这一点，我洗耳恭听！

请参阅这个小提琴：\n http://jsfiddle.net/M8Wy6/1/

<div id="home-page-wrap">\n    <div id="container">\n            <div id="header">\n                <div class="top-header">\n                    <div id="logo">logo</div>\n                    <div id="header-nav">header nav</div>\n                </div>\n                <div id="home-slider">slider</div>\n                <div id="main-nav">main nav</div>                \n            </div><!-- header -->\n\n            <div id="content">\n                 <div class="hentry">\n                        <div id="side-bar">the sidebar</div>\n                        <div class="entry-home">thecontent</div>\n                </div>\n                <div class="home-bottom">home bottom</div>\n           </div>\n           <div id="footer">footer</div>\n    </div>\n</div>\xe2\x80\x8b\n

body {background:#F2F2F2;}\n\n#home-page-wrap {min-height:100%; height:auto !important; height:100%; width: auto; margin:0 auto; padding:0; background:#F2F2F2;}\n\n#container {width:260px; min-height:100%; …

是否position:static等同于position: relative没有指定 top、bottom、right 或 left 属性？

我认为这是因为一个元素postion: absolute相对于第一个没有postion: static. 使用 来创建元素似乎是任意的，如果不使用其他属性position: relative，它的行为将与 a 相同position: static。我想我可能会遗漏一些关于staticvs 的信息relative。

谢谢！

我正在使用这个JS小提琴:http://jsfiddle.net/BY3tz/1/

注意当您删除position,left和top从属性dotParentCSS类,黑点是在盒子的中心.

我正在寻找一种方法来保持黑点居中(垂直和水平),同时保留上面提到的3个属性,以便我可以更改left和top属性以将框定位在任何位置,并且黑点将保持居中.

这可能吗？谁能看到我dot班上的错误？

尝试文本对齐中心和边距自动,两者都不起作用,我不想习惯使用'边缘黑客'进行居中.

http://jsfiddle.net/st9AM/1/

.circle{

float: left;
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid #DDD;
}

.inner{
float: left;
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #DDD;
}

有谁可以向我解释为什么我的立场:绝对div不服从我的立场:相对div？

我确信这很简单,但我不能为我的生活看到它是什么.

我想看到位置:绝对div(class-2)位于position位置:relative div(class-1).

这是以下代码的两个类,完整链接:

div.class-1 {
    position:relative;
    background-color:#CCC;
    width: 500px;
    height: 200px;
}

div.class-2 {
    position:absolute;
    background-color:#C96;
    width: 250px;
    height: 100px;
    top:0px;
    right:0px;
}

HTML

<div class="wrapper">
    <div class="before">class-before</div>
    <div class="class-1">class-1</div>
    <div class="class-2">class-2</div>
    <div class="after">class-after</div>
</div>

http://jsfiddle.net/craig_wadman/HMwtN/

希望一切都有意义吗？

应用overflow-y时,Chrome中的DIV不会被渲染(高度保持为零):scroll和position:absolute.如果删除了其中任何一个,则会渲染该框.这在Firefox中不会发生.

HTML

<div id="container">
    <div class="big"></div>
    <div>
        <ul>
            <li>Element #1</li>
            <li>Element #2</li>
            <li>Element #3</li>
            <li>Element #4</li>
            <li>Element #5</li>
        </ul>
    </div>
</div>

CSS

#container ul {
    list-style: none;
    margin: 0;
    overflow-y: scroll;
    position: absolute;
    top: 31px;
    left: 0;
    right: 0;
    bottom: 0;
}

#container {
    height: auto;
    display: -moz-box;
    display: -webkit-box;
    display: box;
}

#container div{
    position: relative;
    height: 100%;
    width: 200px;
}

#container div.big{
    height: 500px;
}

这是一个显示问题的小提琴:http: //jsfiddle.net/351bj7k4/5/

当我制作一个按钮时，我想制作一个当我悬停按钮时出现的 div，尽管我对其宽度和位置有疑问。

这个问题可以在下面的图片和 jsfiddle 中看到。当我对相对按钮进行绝对设置时，看起来它的最大宽度变成了按钮的宽度。如果按钮很小，悬停 div 也会很小。我怎样才能用 a 制作一个普通的悬停 div width:auto？

http://jsfiddle.net/ghpc9fwk/

下面是代码片段，如果运行它，您可以看到标题元素没有粘贴。我查看了以下问题。 “位置：粘性；” 不工作的 CSS 和 HTML 和CSS：“位置：粘性” 在许多其他人中定义了“高度”时不起作用，但它没有帮助..

这是我的代码。

<body style="margin: 0">
  <div id="header" style="height: 50px;width: 100%;position: sticky;top: 0px;background-color: rgb(33, 150, 243);">
    <div>header contents</div>
    <div>header contents</div>
  </div>
  <div id="container" style="position: absolute; top: 50px; left: 0px; width: 100%; background: #ddd;">
    <div style="height: 1000px;">
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
    </div>
  </div>
</body>

我还注意到，如果我从容器 div 中删除 position: absolute ，粘性开始正常工作。任何帮助将不胜感激。