标签: css-position

我有一个水平列表框，它被一个弹出式覆盖重叠。水平框的结构使用ui li

现在的问题是，如何使用z-index. 在我的示例中，我需要获取在覆盖 div 上方li具有类名.test的 。

.wrapper { position: relative }

ul li {
  margin:0;
  padding:0
}

li {
  background:yellow;
  display:inline-block;
  width:60px;
  height: 60px;

}

.overlay {
  background: rgba(0,0,0,0.5);
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:10
}

.test {
  z-index:100 /*not working */
}

演示

HTML：

<div class="wrap">
    <div class="fixed"></div>
</div>
<div class="cover"></div>

CSS：

.cover{z-index: 10;} 
.wrap{position: relative; z-index: 1;} 
.fixed{position: fixed; display: block; z-index: 1;}

示例：http : //jsfiddle.net/6fq8L/

在页面滚动 .cover 元素隐藏在 .fixed 元素后面，尽管它的 z-index 属性更高。如何在 .wrap 和 .fixed 元素上方显示 .cover 元素，以便在滚动页面时覆盖它们？

我在 css 方面不是很专家。我没有给出任何位置并且有像

#myId{
    margin-left: 10px;
    margin-top: 10px;
}

#myId{
    position: relative;
    left: 10px;
    top: 10px;
}

两者都做了我想要的。我什么时候应该准确使用相对位置。与其他相比有什么优势或劣势？

标题说明了一切。

div 在位置后消失：相对

我已经检查了这个答案，但它似乎不适合我所追求的。此处 OP 的问题似乎是他在其父 DIV 中没有高度。我有，唯一的是它是通过 jQuery 动态生成的。这可能是问题吗？

这是jsbin：

http://output.jsbin.com/widipat

我已经注释掉了 position 属性。

我在容器中放置了一个 SVG 对象。它的类具有以下 CSS。

.container{
    position: relative;
}

.svgObj{
    position: absolute;
    top: 0;
    left: 0;
    width: 2em;
    height: 2em;
}

所以，问题是 svg 并没有在容器的 0:0 处结束，而是更像是在它以南的 200px 处。

奇怪的是，如果我用 SVG 标记替换具有相同类的 DIV，它会准确地显示我想要的位置。

该问题仅在 IE 中明显（仅尝试了 11，但在早期版本中也可能存在）。好吧，这个问题在 Minori 中也很明显。在 Safari、Chrome、FF、Opera 中运行良好，除了 IE。

任何想法都是最受欢迎的。

HTML 代码看起来像这样

<div class="container">
<svg class="svgObject" data-x="0" data-y="0" data-text="My Obj"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <a id="h-72417" href="#">
        <path d="M12 4a8 0z"></path>
        <path d="M12 4a8 0-16z"></path>
    </a>
</svg>
</div>

别介意路径值，我在这里缩短了它们以节省空间。应该没关系。数据属性也不相关。如上所述，只需将 SVG 切换为 DIV 并添加“hello”而不是路径即可使其按预期工作。

谢谢。

我有一个绝对定位的 div，我给了它一个left位置。

对于桌面，必须有left100px的位置。

但是对于平板电脑，我想一直向右推。

为了实现这一点，我尝试做right: 0，但由于left: 100px已经在 CSS 中定义，right: 0并没有按预期将它一直推到右边。

然后我尝试left: 0在平板电脑上做以抵消它的效果，但这也不起作用。

有没有办法取消left头寸？类似的东西left: none（我知道这行不通，但这是我能够解释这一点的唯一方法。）

桌面 CSS：

.mydiv {
    positon: absolute;
    left: 100px;
}

平板电脑 CSS：

@media (max-width:768px){
    .mydiv {
        left: 0;
        right: 0;
    }
}

我可以做一些事情，比如right: 400px把它放到我想要的位置，但我很好奇是否有一种方法可以使用，right: 0所以我确信它被完全推到了右边。

谢谢！

我有一个固定的背景和一个绝对位置的 div；我想把它放在top: 5px and left: 5px，当我没有旋转文本时它正在工作，但我想让我的文本垂直，所以我旋转了 90°。我想粘贴它，left: 5px and top 5px但是当我应用旋转时，文本被剪切到页面上方，甚至左侧部分也放错了位置..

这是一些css 代码（我正在使用 glamor 但它应该与普通 css 一样工作）

const background = css({
  background: 'url(/static/profile.jpg) no-repeat left top fixed',
  backgroundSize: 'auto 100%',
  backgroundColor: '#040404',
  position: 'fixed',
  width: '100%',
  height: '100vh',
  top: '0',
  left: '0',
  zIndex: '0',
})

const socialBloc = css({
  color: '#fff',
  position: 'absolute',
  top: '5px',
  left: '5px',
  zIndex: '999',
  '-webkit-transform': 'rotate(270deg)',
  '-moz-transform': 'rotate(270deg)',
  '-ms-transform': 'rotate(270deg)',
  '-o-transform': 'rotate(270deg)',
  transform: 'rotate(270deg)',
})

和Html：

<PageLayout …

我有一个着陆页，上面有我网站的标题、一个子标题和一个按钮。我固定了背景图像，background-attachment以便在向上滚动时保持原位。

我希望我的标题、子标题和按钮保持原位，以便概览部分与其重叠。我尝试将文本设置为固定位置并制作z-index: -1，但它位于背景图像后面并出现在概览部分中。 https://codepen.io/anon/pen/qmdzzz

文本被包裹在intro-textdiv 中

@media (min-width: 768px){
  header .intro-text {
    padding-top: 300px;
    padding-bottom: 200px;
    position: fixed;
    z-index: -1
  }
}

然后我尝试为概述部分设置更高的 z-index

#overview {
  z-index: 1000; 
}

https://codepen.io/anon/pen/dWaWor

当我单击“创建过程”按钮时，我无法在灯箱中滚动。

灯箱有一个固定的位置，因为当我使用绝对时，背景会混乱。灯箱是白色背景。

<section id="lightbox">
   <i id="x" class="fa fa-times-circle"aria-hidden="true"></i>
   <p class="large">hi</p>
</section>

>

#lightbox {
  height:100%;
  width:100%;
  display: none;
  position: fixed;
  top:0;
  left:0;
  background: #fff;
  z-index:1;
}

>

 var btn_process = document.getElementById('creation-process');
 var lightbox = document.getElementById('lightbox');
 var x = document.getElementById('x');

 btn_process.onclick = function () {
    lightbox.style.display = 'block';
};

x.onclick = function () {
    lightbox.style.display = 'none';
}

有没有办法使用 CSS 使 div 的位置属性仅相对于视口的顶部固定？我想做的是制作一个随网页上下滚动的导航栏。

position: fixed 

对此工作正常，除了当页面尺寸较小时会产生问题，因为用户无法水平滚动以访问屏幕外的导航栏选项。

也对其他非 CSS 解决方案开放，但如果有一些简单的东西我可以在 CSS 中实现，那将是更可取的。谢谢！