CSS--定位

来源：互联网发布：2017最新网络灰色项目编辑：程序博客网时间：2024/05/20 22:01

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>

阅读全文

0 0