定位(positioning)

发布时间:2020-06-27 23:58:17 作者:yuxin1234567890
来源:网络 阅读:239

一、position(检索对象的定位方式)

 1.语法 position: static / relative /absolute /fixed /center /page /sticky

 2.说明

检索对象的定位方式。

 3.举例  

    <!DOCTYPE html>

    <html lang="zh-cmn-Hans">

    <head>

        <meta charset="utf-8" />

        <title>position_CSS参考手册_web前端开发参考手册</title>

        <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />

        <style>

            #position {

             position: absolute;

        top: 50%;

        left: 50%;

        width: 150px;

        height: 40px;

        margin: -20px 0 0 -75px;

        padding: 0 10px;

        background: #eee;

        line-height: 2.4;

            }

        </style>

    </head>

    <body>

        <div id="position">水平垂直居中的对象</div>

    </body>

    </html>

    

二、z-index(检索或设置对象的层叠顺序)

 1.语法 z-index:auto/integer

 2.取值  

 3.说明

   检索或设置对象的层叠顺序。

  3.举例

    <!DOCTYPE html>

    <html lang="zh-cmn-Hans">

    <head>

        <meta charset="utf-8" />

        <title>z-index_CSS参考手册_web前端开发参考手册系列</title>

        <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com"         />

        <style>

        .z1,

        .z2,

        .z3 {

         position: absolute;

         width: 200px;

         height: 100px;

         padding: 5px 10px;

         color: #fff;

         text-align: right;

        }

        .z1 {

     z-index: 1;

background: #000;

}

.z2 {

z-index: 2;

top: 30px;

left: 30px;

background: #C00;

}

.z3 {

z-index: 3;

top: 60px;

left: 60px;

background: #999;

}

</style>

</head>

<body>

<div class="z1">z-index:1</div>

<div class="z2">z-index:2</div>

<div class="z3">z-index:3</div>

</body>

</html>





三、top

四、right

五、bottom

六、left

七、clip

推荐阅读:
  1. CSS中的定位和浮动
  2. Android8.0适配前台定位服务service的示例代码

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

定位(positioning) ni sition

上一篇:单选多选post值到控制器处理

下一篇:ESXI使用记录---安装vSphere(VCSA)

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》