cssZ-index,背景图片，权重

最新推荐文章于 2022-09-13 18:37:52 发布

zhaihaohao1

最新推荐文章于 2022-09-13 18:37:52 发布

阅读量2.9k

点赞数

分类专栏： web前端demo

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/49403705

版权

web前端demo 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

Z-index就是z轴的方向。

<!DOCTYPE html>
<!--z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。-->
<!--注释：元素可拥有负的 z-index 属性值。-->
<!--注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！-->
<!--position为relative或absolute或fixed才起作用，static不起作用-->
<!--http://www.w3school.com.cn/cssref/pr_pos_z-index.asp-->
<!--http://www.fx114.net/qa-6-305787.aspx-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
         *{
             padding: 0;
             margin: 0;
         }
         .mydiv1{
             position: fixed;
             width: 100px;
             height: 100px;
             background-color: #00A000;
             top: 0px;
             lef: 0px;
             z-index: 1;

         }
        .mydiv2{
            position: fixed;
            width: 100px;
            height: 100px;
            background-color: #219161;
            top: 50px;
            left: 50px;
            z-index: 2;

        }
    </style>
</head>
<body>
<div class="mydiv1">
</div>
<div class="mydiv2">
</div>

</body>
</html>

<!DOCTYPE html>
<!--背景尺寸背景居中-->
<!--参考http://www.w3school.com.cn/cssref/pr_background-size.asp-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        *{
            margin: 0;
            padding: 0;
        }
        /*最外层的div要设置宽高100% 100%，则要给html,body宽高都设置成100%*/
        .mydiv1{
            width: 100%;
            height: 100%;
            /*设置背景图片，x y 轴都不重复*/
            background: url("images/img01.jpg")no-repeat;
            /*设置背景尺寸*/
            background-size: 100% 100%;
            /*背景居中*/
            background-position: center;
        }
    </style>
</head>
<body>
   <div class="mydiv1">

   </div>
</body>
</html>

<!DOCTYPE html>
<!--权重-->
<!--第一等：style，代表内联样式，如: style=””，权值为1000。-->
<!--第二等：ip，代表ID选择器，如：#content，权值为100。-->
<!--第三等：class，代表类，伪类和属性选择器，如.content，权值为10。-->
<!--第四等：元素，代表类型选择器和伪元素选择器，如div p，权值为1。-->
<!--权值越大，优先级越高,优先执行style,在执行ip,在执行class,在执行元素-->

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        #mydivip{
            width: 100px;
            height: 100px;
            background-color: #AA22FF;
        }
        .mydivclass{
            width: 100px;
            height: 100px;
            background-color: #00A000;

        }
        div{
            width: 100px;
            height: 100px;
            background-color: #005599;

        }
    </style>
</head>
<body>
    <div id="mydivip" class="mydivclass" style=" width: 100px;
            height: 100px;
            background-color: red;">
        <p id="red">这个段落是红色。</p>
        <p>人的生命是有限的，可是为人民服务是无限</p>
    </div>
</body>
</html>

zhaihaohao1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cssZ-index,背景图片，权重

Z-index就是z轴的方向。html>z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。-->html>head lang="en"> meta charset="UTF-8"> title>title> style> *{ padding: 0;
复制链接

扫一扫

专栏目录