2

我<article>在 a 中有一个元素，<div>并且article有一个position: relative;. 我将它向上移动了 95 像素 ( bottom: 95px;)，但它在原来位置占据的空间仍然存在。我怎样才能让它消失？当我对article定位为绝对值做同样的事情时，没有问题。但是我也需要把它放在中间，并且margin: auto不能与position:absolute.

http://jsfiddle.net/xnvMD/2/

4

3 回答 3

1

代替相对位置，使用负的上边距。像这样的东西：

margin:-95px auto 0 auto;

正如 CBroe 已经指出的那样，要让箭头显示在上面的图像上，您需要position:relative在bottom设置z-index.

position:relative;
z-index:1;

从技术上讲，您甚至不需要z-index.

如果你很好奇为什么会这样，你需要了解 CSS 中绘制顺序的规则。完整的细节相当复杂，但在z-index 属性部分中概述了基础知识。

在每个堆叠上下文中，以下图层按从后到前的顺序绘制：

  1. 构成堆叠上下文的元素的背景和边框。
  2. 具有负堆栈级别（最负优先）的子堆栈上下文。
  3. 流入的、非内联级别的、非定位的后代。
  4. 未定位的浮动。
  5. 流入的、内联级的、非定位的后代，包括内联表和内联块。
  6. 堆栈级别 0 的子堆栈上下文和堆栈级别 0 的定位后代。
  7. 具有正堆栈级别的子堆栈上下文（最不积极的优先）。

默认情况下，图像（归类为内联级、非定位后代）位于第 5 级，高于您的article元素（非内联级后代）的第 3 级。

通过将 a 添加postion:relative到article元素，您已将其设置为定位的后代，级别 6，因此将其移至堆栈的更高位置并再次位于图像上方。

请注意，如果您article包含自己的任何内联内容，则该内容将显示在img元素上方（它们都是内联的，但文章的内联内容在树顺序的后面），但article背景和边框仍会在下面绘制.

于 2013-05-11T14:31:32.530 回答
1
于 2013-05-11T14:32:03.073 回答
0

我没有足够的声誉来添加评论而不先添加答案。没有看到像 Cody 这样添加的代码，很难提供帮助。

我认为您并不完全确定定位是如何工作的。当一个元素设置为 position: absolute 时，它​​会相对于它拥有的第一个没有 position: static 的父元素进行定位。如果没有这样的元素，则具有 position: absolute 的元素相对于<html>（来自 Codecademy）定位

如果你给一个元素相对定位并告​​诉它有 10px 的 margin-top，它不会从任何特定的东西向下移动 10 个像素——它会从原本应该是的位置向下移动 10 个像素。

请记住，如果您在另一个元素内部的元素上使用 margin-auto，它将在该元素内部居中，而不是在文档中。但默认情况下，Div 是页面的整个宽度。

于 2013-05-11T14:28:32.300 回答