CSS z-index属性

Question

真的希望有人可以帮助z-index新手。

我正在尝试将div放在我页面上其他所有内容之上：

http://www.designbyantony.com/bipf/index.html

div（你可能会看到问题）是“2015年3月6日至8日”的圆形蓝色圆圈。 我希望它能恰到好处地放在其他一切之上 - 即：稍微越过导航栏并切断具有重复“拱形”设计的区域。

我尝试过使用z-index，但我显然在某个地方出错了。

CSS 位于

http://www.designbyantony.com/bipf/styles.css

任何人都可以帮助我吗？

Answer 1

像这样改变你的CSS。移动两个位置：相对于CSS

#page_content {
width: 970px;
margin: auto;
height: auto;
padding-top: 15px;
padding-left: 5px;
padding-right: 5px;
/* position: relative; */
background-color: #FFFFFF;
overflow: hidden;
/* position: relative; */
z-index: 2;
 }

然后再次更改你的CSS＃dates.remove左侧位置：1046;顶部：171px; 并放在右边：0

 #dates {
position: absolute;
left: 1046px;
top: 171px;
z-index: 10000;
height: 140px;
width: 140px;
display: block;
 background-color: none;
}

Answer 2

在 overflow: hidden 行<{1}}的{​​{1}}中移除#page_content：

styles.css

或者，如果您想在245之后进行清算，可以使用以下内容：

#page_content {overflow: visible;}

原因： #page_content的父级被#page_content:after {display: block; clear: both; content: " ";} 裁剪，#dates已#page_content，但不允许内容挂起。

Answer 3

它不是z-index问题。你的div id =＆＃34;日期＆＃34;实际上是由你的div id = page_content

裁剪的

Answer 4

将styles.css

中#page_content的溢出从隐藏更改为可见

Answer 5

Z-index有效，overflow:hidden与position:relative #page_content组合导致剪辑。修复此问题的最简单方法是在div内添加另一个#page_content包装，并将overflow:hidden移到此内部div。如果没有position:relative，overflow:hidden将不会剪切此div的绝对定位的后代，并且页面将按计划显示。