div img 覆盖在上面_怎样用CSS +DIV将第二张特定图片覆盖第一张图片的部分区域...

展开全部

假设图都是100*100的，实现方式如下：

* {margin:0;padding:0}

div {position:relative;width:500px; heigth:500px; background:#ccc;}

img {display:block;}

//第一种

#img2 {position:absolute; top:0px; left:0px;}//绝对定位，脱离文档流，这样就可以让第二张图片e69da5e887aa62616964757a686964616f31333431353933覆盖到第一张上了。

//第二种

#img1 {position:absolute; top:0px; left:0px;z-index:1;}

#img2 {position:absolute; top:0px; left:0px;z-index:11;} //第二种方式，是样第二张的层级高出第一张，这样也可以实现题目要求。

扩展资料：

div+css布局——

布局分为静态布局和响应式布局。我们div和css布局是静态布局。在静态布局下，用百分号和像素设置div等区块的width和heigth属性效果是不一样的。

百分号：当用百分号设置各个div(区块)的时候，是相对父元素的，当父元素相对父元素，父元素与又相对父元素最终到。

html元素的时候是相对的屏幕的height和width的，所以当你把所有的div(区块)的height和width的都用百分号的时候，就可以实现响应式布局的效果，随着不同的屏幕分辨率来改变区块的实际像素。

relative：relative是相对定位，区块的初始位置和偏移不是参照父元素，而是参照最近的一个父元素里面的他的上一个元素

这样也可以设置top，left等属性的值(用百分号)来实现位置的偏移，而且可以达到响应式布局的效果。

像素px：用像素px来实现布局，直接设置父元素的height和width像素数，这样网页就是定长和定宽的了，遇到小屏幕会出现滚动条。