CSS之粘滞定位

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

极客研究者

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

阅读量1.4k

点赞数

分类专栏： 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>

极客研究者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之粘滞定位

粘滞定位:当元素的position属性设置为sticky,则开启了粘滞定位和相对定位的特点基本一致不同的是粘滞定位可以在元素到达某个位置时将其固定,不随滚动条滚动而滚动相对于body元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta...
复制链接

扫一扫