如何CSS实现两个层重叠与显示？

html-css019

如何CSS实现两个层重叠与显示？,第1张

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>test</title>

<style type="text/css">

#father{

position:relative/*父盒子位置要用relative*/

margin:20px auto

width:400px

height:100px

border:1px solid red

}

#father #a{

position:absolute/*子盒子位置要用absolute*/

width:100%

height:50px

background:blue

opacity:0.6

z-index:2

}

#father #b{

position:absolute/*子盒子位置要用absolute*/

width:100%

height:80px

background:#F4AF19

text-align:right

z-index:1

}

</style>

</head>

<body>

<!--按上面的CSS定位方法布局就会重叠，那个子盒子在前面用Z-INDEX 决定-->

<div id="father">

<div id="a">我是A盒子</div>

    <div id="b">我是B盒子</div>

</div>

</body>

</html>

重叠在一起需要改变默认的布局方式，将其中一个显示在上层需要设置深度顺序，这两点分别用如下样式完成

position: absolute/*设置为绝对定位*/

z-index:999 /*设置重叠的上下次序，值越大月在上方*/示例如下

1.

创建Html元素

<div class="top">

<div class="b">我是绝对定位，并且重叠在上方</div>

<div class="a">我是默认定位</div>

</div>2.

设置css样式

div.top{margin:50pxpadding:20pxwidth:200pxheight:200pxborder:2px dashed #ebbcbe}

div.top div{width:100pxheight:100pxpadding:10pxcolor:white}

div.a{background:red}

div.b{background:greenposition:absolutetop:100pxleft:100pxz-index:999}3.

观察显示效果

.wrap li:last-child{ border-right:none} 吧最后一个li的border-right的border去掉。。。但是兼容不好，ie好像是ie9以上的浏览器才行~~

不行还有一种方法li给border，通过margin-left:-1px合并border，具体如下

body,ul{

margin:0

padding:0}

li{

list-style:none}

.wrap{

width:385px

height:39px

overflow:hidden

border-left:1px

solid

#0000f0

margin:30px

auto}

.wrap

li{

width:76px

height:37px

line-height:37px

text-align:center

border:1px

solid

#0000f0

float:left

margin-left:

-1px

}

妙味

妙味

妙味

妙味

妙味

演示：