首页 > Web开发 > 详细

CSS 定位

时间:2019-02-11 16:39:57      阅读:211      评论:0      收藏:0      [点我收藏+]

 

 

 

1.定位

技术分享图片

技术分享图片

 

 

(1)position定位属性;默认值是static,无定位。相对定位:相对于原来的位置来说的。绝对定位:相对于最近的一个被定位过的祖先元素标签 

(2)定位示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>14定位示例</title>

    <style>

        * {
            margin: 0;
            padding: 0;
        }

        /*让标签定位在一个位置,距离网页的上面和左面各是多少像素的位置    */

        .c1,
        .c2,
        .c3,
        .c4 {
            height: 150px;
            width: 150px;
        }

        .c1 {
            background-color: red;
        }

        /* 相对定位 */
        .c2 {
            background-color: green;
            /*position: static;   !* position属性就是定位相关的,默认值是static *!*/
            position: relative; /* relative表示相对定位,相对于自己原先的位置 */
            left: 400px;
            top: 150px;
        }

        .c3 {
            background-color: blue;
        }

        /* 绝对定位 */
        .c4 {
            background-color: darkcyan;
            position: absolute; /* 绝对定位,相对与被定位过的父标签的位置 */
            top: 150px;
            left: 400px;
        }

    </style>

</head>
<body>


<div class="c1">C1</div>
<div class="c2">C2</div>
<div class="c3">C3</div>
<div class="c2">CC2
    <div class="c4">C4</div>
</div>
</body>
</html>

技术分享图片

 

 

2.fixed 固定定位(返回顶部按钮通常用这个做)

技术分享图片

 

 

 /* 固定定位,在界面中,位置不会变化*/
        .fixed-test {
            position: fixed;
            right: 20px;
            bottom: 20px;
            background-color: blueviolet;
        }

<div class="fixed-test">返回顶部</div>
 

技术分享图片

 

CSS 定位

原文:https://www.cnblogs.com/whylinux/p/10362153.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!