H5基础知识第七课时（CSS定位）

yuzhaocong

于 2017-05-06 12:43:03 发布

阅读量164

点赞数

本文链接：https://blog.csdn.net/yuzhaocong/article/details/71250650

版权

1.CSS相对定位 position:relative;
(1)CSS的相对定位是相对于元素的初始位置

(2)CSS相对定位元素仍占据原来的空间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>

        #left,#center,#right{
            float: left;
        }
        #left{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        #center{
            width: 200px;
            height: 200px;
            background-color: #cccccc;
            position: relative;
            top: 20px;
            left: 20px;

        }
        #right{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
        <div>
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
        </div>
</body>
</html>

2.CSS绝对定位 position:absolute;
(1)采用绝对定位的元素，会寻找离它最近的采用了定位的父元素，并以它为坐标进行定位，如果所有的父元素没有使用定位，则以body为坐标进行定位。

(2)绝对定位元素占用的空间会被其他元素占用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>

        #left,#center,#right{
            float: left;
        }
        #left{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        #center{
            width: 200px;
            height: 200px;
            background-color: #cccccc;
            position: absolute;
            top: 20px;
            left: 20px;

        }
        #right{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
        <div>
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
        </div>
</body>
</html>

3.固定定位 position: fixed;

将固定元素固定在特定位置，一般加一个z-index，使其不被覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        #back{
            width: 100px;
            height: 100px;
            background-color: yellow;
            text-align: center;
            line-height: 100px;
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
        }

    </style>


</head>
<body>
<div style="height: 1000px">
    <div id="back">
        返回顶部
    </div>
</div>
</body>
</html>

yuzhaocong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5基础知识第七课时（CSS定位）

1.CSS相对定位 position:relative; (1)CSS的相对定位是相对于元素的初始位置 (2)CSS相对定位元素仍占据原来的空间html>html lang="en">head> meta charset="UTF-8"> title>相对定位title> style> #left,#cent
复制链接

扫一扫