如何在较低的屏幕分辨率下取消z-index?

时间:2017-06-21 15:32:33

标签: media-queries css-position z-index

我不确定是否应该将定位或juste设置为z-index为auto。



#partners{
width:100%;
height:400px;
padding-top:5%;
padding-bottom:5%;
margin:0 auto;
text-align: center; 
background-color:white;
position: relative;
z-index: 1;
overflow: hidden;
    
}
#partners img{
display: inline-block;
width:24%;
}
 
#partners img:nth-child(2){
position: absolute;
z-index: 4;
left: 5%;
-ms-transform: rotate(5deg); /* IE 9 */
-webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
transform: rotate(5deg);
}
#partners img:nth-child(3){
position: absolute;
z-index: 3;
left: 25%;
-ms-transform: rotate(-5deg); /* IE 9 */
-webkit-transform: rotate(-5deg); /* Chrome, Safari, Opera */
transform: rotate(-5deg);
}
#partners img:nth-child(4){
position: absolute;
z-index: 5;
right: 5%;
-ms-transform: rotate(5deg); /* IE 9 */
-webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
transform: rotate(5deg);
}
#partners img:nth-child(5){
position: absolute;
z-index: 10;
right: 27%;
-ms-transform: rotate(5deg); /* IE 9 */
-webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
transform: rotate(5deg);
}


@media screen and (max-width: 600px) {
		
        
        #partners{
            z-index:0;
            position:static; 
        }
        #partners img{
            display: block;
            width:60%;
            z-index:0;
            position:static;
        }
        
        
	} 

<div id="partners">
				<h1>Partners, best friends</h1>
				<img src="img/personna1.jpg" alt=""   />
				<img src="img/personna2.jpg" alt=""   />
				<img src="img/personna3.jpg" alt=""   />
				<img src="img/personna4.jpg" alt=""   />
		    </div>
&#13;
&#13;
&#13;

我将z-index设置为某些图像,但是当我使用较小的分辨率时,我想将其删除。我无法确定错误,帮助,请....

0 个答案:

没有答案