CSS--定位

最新推荐文章于 2022-06-05 22:13:55 发布

BtWangZhi

最新推荐文章于 2022-06-05 22:13:55 发布

阅读量366

点赞数

分类专栏： HTML&&CSS

本文链接：https://blog.csdn.net/BtWangZhi/article/details/76360051

版权

HTML&&CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1 CSS可通过如下的属性来定为元素的位置
这里写图片描述

2 CSS定位-位置布局：
2.1 相对布局：relative，将left，right，top，bottom设置偏移量，向相反的方向偏移

        .position1{
            width: 100px;
            height: 100px;
            background-color: #ff1333;
            position: relative;
            top: 100px;
        }
    </style>
</head>
<body>
    <div class="position1"></div>
<script>
    for (var i=0;i<100;i++){
        document.write(i+"<br/>");
    }
</script>
</body>
</html>

这里写图片描述
按照正常的流排布。
2.2 绝对布局：absolute,均中一定的位置开始。相互覆盖。

        .position1{
            width: 100px;
            height: 100px;
            background-color: #ff1333;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="position1"></div>
<script>
    for (var i=0;i<100;i++){
        document.write(i+"<br/>");
    }
</script>
</body>
</html>

这里写图片描述
绝对布局将会覆盖部分内容。
2.3 固定布局：fixed，标签指定在一定的屏幕位置，不随上下滚动，总是在一定的位置。

.position1{
            width: 100px;
            height: 100px;
            background-color: #ff1333;
            position: fixed;
        }
    </style>
</head>
<body>
    <div class="position1"></div>
<script>
    for (var i=0;i<100;i++){
        document.write(i+"<br/>");
    }
</script>

这里写图片描述
随着向下滑动，设置为固定布局的标签将不会随着向上和向下而滑动。
2.4 静态布局：static, left，right，top，bottom均不起作用的。

        .position1{
            width: 100px;
            height: 100px;
            background-color: #ff1333;
            position: static;
        }
    </style>
</head>
<body>
    <div class="position1"></div>
<script>
    for (var i=0;i<100;i++){
        document.write(i+"<br/>");
    }
</script>

这里写图片描述
2.5 特别要说明的是z-index属性，在标签出现重合的时候可设置两个标签的z-index的值来决定哪个标签显示在前面。

3 CSS定位-浮动：
经典的图片展示页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 10px auto;
            width: 50%;
            height: auto;
        }
        .image{
            border: 1px solid darkgray;
            width: auto;
            height: auto;
            float: left;
            text-align: center;
            margin: 5px;
        }
        img{
            margin: 5px;
            opacity: 0.5;
        }
        .text{
            font-size: 12px;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <div>
        <div class="image">
            <a href="#" target="_self">
                <img src="http://localhost:63342/Demo02/img/盒子模型概述图.png" alt="风景" width="200px" height="200px">
            </a>
            <div class="text">德玛xiya</div>
        </div>
        <div class="image">
            <a href="#" target="_self">
                <img src="http://localhost:63342/Demo02/img/盒子模型概述图.png" alt="风景" width="200px" height="200px">
            </a>
            <div class="text">德玛xiya</div>
        </div>
        <div class="image">
            <a href="#" target="_self">
                <img src="http://localhost:63342/Demo02/img/盒子模型概述图.png" alt="风景" width="200px" height="200px">
            </a>
            <div class="text">德玛xiya</div>
        </div>
        <div class="image">
            <a href="#" target="_self">
                <img src="http://localhost:63342/Demo02/img/盒子模型概述图.png" alt="风景" width="200px" height="200px">
            </a>
            <div class="text">德玛xiya</div>
        </div>
        <div class="image">
            <a href="#" target="_self">
                <img src="http://localhost:63342/Demo02/img/盒子模型概述图.png" alt="风景" width="200px" height="200px">
            </a>
            <div class="text">德玛xiya</div>
        </div>
        <div class="image">
            <a href="#" target="_self">
                <img src="http://localhost:63342/Demo02/img/盒子模型概述图.png" alt="风景" width="200px" height="200px">
            </a>
            <div class="text">德玛xiya</div>
        </div>
        <div class="image">
            <a href="#" target="_self">
                <img src="http://localhost:63342/Demo02/img/盒子模型概述图.png" alt="风景" width="200px" height="200px">
            </a>
            <div class="text">德玛xiya</div>
        </div>
        <div class="image">
            <a href="#" target="_self">
                <img src="http://localhost:63342/Demo02/img/盒子模型概述图.png" alt="风景" width="200px" height="200px">
            </a>
            <div class="text">德玛xiya</div>
        </div>
        <div class="image">
            <a href="#" target="_self">
                <img src="http://localhost:63342/Demo02/img/盒子模型概述图.png" alt="风景" width="200px" height="200px">
            </a>
            <div class="text">德玛xiya</div>
        </div>
        <div class="image">
            <a href="#" target="_self">
                <img src="http://localhost:63342/Demo02/img/盒子模型概述图.png" alt="风景" width="200px" height="200px">
            </a>
            <div class="text">德玛xiya</div>
        </div>
    </div>
</body>
</html>