position特性

CSS的position属性用于指定一个元素在文档中的定位方式。toprightbottomleft属性则决定了该元素的最终位置。

position取值

static(默认值):静态定位

relative:相对定位

absolute:绝对定位

fixed:固定定位

sticky:黏性定位

relative相对定位

  • 如果没有定位偏移量,对元素本事没有任何影响

  • 不适用元素脱离文档流

  • 不影响其他元素布局

  • toprightbottomleft是相对于当前元素自身进行偏移

absolute绝对定位

  • 使用元素完全脱离文档流

  • 使内联元素支持宽高(让内联具备块特性)

  • 使块元素默认宽根据内容决定(让块具备内联的特性)

  • 如果有定位祖先元素相对于定位祖先元素发生偏移,没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)

fixed固定定位

  • 使元素完全脱离文档流

  • 使内联元素支持宽高(让内联具备块特性)

  • 使块元素默认宽根据内容决定(让块具备内联的特性)

  • 相对于整个浏览器窗口进行偏移,不受浏览器滚动条的影响

sticky黏性定位

  • 在指定的位置,进行黏性操作。

z-index定位层级

默认层级为0

利用定位实现下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ToDo Blog</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        div {
            text-align: center;
        }
        #menu {
            width: 100px;
            height: 30px;
            margin: 20px auto;
            border: 1px solid #000;
            position: relative;
        }
        #menu ul {
            width: 100px;
            border: 1px solid #000;
            position: absolute;
            top: 30px;
            left: -1px;
            background: #fff;
            display: none;
            text-align: center;
        }
        #menu:hover ul {
            display: block;
        }
        #menu ul li:hover {
            background: #cccccc;
        }
        p {
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="menu">
        ToDo Blog
        <ul>
            <li>Python</li>
            <li>大前端</li>
            <li>Go</li>
            <li>Linux</li>
        </ul>
    </div>
    <p>ToDo Blog,JavaScript/Python/Golang初学者,专注互联网技术。</p>
</body>
</html>

不起眼的小广告

上一篇:float浮动概念及原理

下一篇:CSS Sprite