CSS之粘滞定位

最新推荐文章于 2023-05-02 21:00:00 发布

极客研究者

最新推荐文章于 2023-05-02 21:00:00 发布

阅读量1.5k

点赞数

分类专栏： CSS样式表文章标签： css 定位

本文链接：https://blog.csdn.net/qq_34550459/article/details/105573633

版权

CSS样式表专栏收录该内容

39 篇文章 0 订阅

订阅专栏

粘滞定位:当元素的position属性设置为sticky,则开启了粘滞定位
和相对定位的特点基本一致
不同的是粘滞定位可以在元素到达某个位置时将其固定,不随滚动条滚动而滚动
相对于body元素

<!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">
    <link rel="stylesheet" href="../css/reset.css">
    <title>导航条-粘滞定位</title>
    <style>

        .nav_first{
            width:1210px;
            height:3000px;
            margin:50px auto;
        }

        .nav_first div{
            height:36px;
            width:14%;
            background-color:#e8e7e3;
            
        }

        .nav_menu
        {
            padding-top:10px;
            float: left;
                        
     		/*开启粘滞定位 */
            position: sticky;
            top: 10px;
        }

        .nav_menu:hover{
            background-color:#3f3f3f;
        }

        .nav_menu a{
            text-decoration:none;
            display: inline-block;
            color:#777777;
            font-size:20px;
            font-weight:bold;
            width:100%;
            height:100%;
            text-align: center;
            /*将文字在父元素中垂直居中 */
            line-height:100%;
        }

        .nav_menu a:hover{
            color: #e8e7e3;
        }
    </style>
</head>
<body>
    <div class="nav_first">
        <div class="box1 nav_menu">
          <a href="https://www.w3school.com.cn/h.asp" target="_blank" title="HTML 系列教程">HTML/CSS</a>
        </div>
            <div class="box2 nav_menu">
             <a href="#" title="浏览器脚本">Brower Side</a>
            </div>
            <div class="box3 nav_menu">
            <a href="#" title="服务器脚本">Server Side</a>
            </div>
            <div class="box4 nav_menu">
                <a href="#" title="编程教程">Programming</a>
            </div>
            <div class="box5 nav_menu">
                <a href="#" title="XML教程">XML</a>
            </div>
            <div class="box6 nav_menu">
                <a href="#" title="建站手册">Web Building</a>
            </div>
            <div class="box7 nav_menu">
                <a href="#" title="参考手册">Reference</a>
            </div>
    </div>
</body>
</html>