如何优先显示属性css
第一种：
在css中有不同的优先级
想提高某个属性的优先级：在元素后加！important；
比如，在CSS中给了box {color:red !important;}这个属性，就意味着类名为box的这个标签具有最高优先级，不管你把默认的颜色设置为什么，他最终只会显示红色。
第二种：
在定位时用z-index
z-index值越高，则越显示在前面
正常的z-index值等于0 最高999
<!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:06;
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>
可以使用以下几种方式：
1、相对定位方式，设置的position属性为relative，然后设置left top属性为负数，做到显示中间区域，外层标签要设置overflow属性为hidden不然会撑大。
2、把当做背景使用，然后设置背景居中或者手工填写位置。
3、使用margin属性，外层标签要设置overflow属性为hidden不然会撑大。
代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 40 Transitional//EN"><html>
<head>
<title></title>
<style>
div1{
width:300px;
height:400px;
border:1px solid #4EC83B;
overflow: hidden;
}
div1 img {
position: relative;
left: -100px;
top: -150px;
}
</style>
</head>
<body>
<div style="float:left;margin:10px;">
第一种
<div class="div1">
<img src="img1jpg" width="500" height="700" alt="" />
</div>
</div>
<div style="float:left;margin:10px;">
第二种
<div style="width:300px;height:400px;background-image:url(img1jpg);background-repeat: no-repeat;background-position:center center;border:1px solid #4EC83B;">
</div>
</div>
<div style="float:left;margin:10px;">
第三种
<div style="width:300px;height:400px;border:1px solid #4EC83B; overflow: hidden;">
<img src="img1jpg" width="500" height="700" style="margin:-150px -100px;" />
</div>
</div>
</body>
</html>
效果如下：
都用float:left就行，然后因为你的border宽度是1px，所以都用50%是会被挤下来的。
下面一个小例子，看能不能给你一点帮助：
<html>
<head>
<style>
div-col
{
float:left;
width:24%;
height:400px;
border:1px solid red;
margin-left:4px;
}
</style>
</head>
<body>
<div class='div-col'> </div>
<div class='div-col'> </div>
<div class='div-col'> </div>
<div class='div-col'> </div>
</body>
</html>
效果如图：
你把CSS作如下改动就行：
<style type="text/css">
#Layer1 {
left:198px;
top:50px;
width:294px;
height:141px;
z-index:1;
position: absolute;
background-color: #FF00FF;
}
#Layer2 {
width:100px;
height:100px;
z-index:2;
margin: -50px 0px 0px -50px;
background-color: #FFFF00;
}
</style>
改为：
<style type="text/css">
#Layer1 {
left:198px;
top:50px;
width:294px;
height:141px;
position: absolute;
background-color: #FF00FF;
}
#Layer2 {
width:100px;
height:100px;
margin: 0px;
background-color: #FFFF00;
}
</style>
这样就行，margin 是设置内补丁的．另外Z-index是设层的位置顺序．建议你多试验，多看效果．
如何优先显示属性css
本文2023-10-03 21:37:39发表“资讯”栏目。
本文链接：https://www.lezaizhuan.com/article/167770.html
相关文章
