前端网页css实现固定定位

最新推荐文章于 2024-08-11 10:27:53 发布

馍馍菜

最新推荐文章于 2024-08-11 10:27:53 发布

阅读量5.6k

点赞数 5

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/yun66666/article/details/78095664

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前端网页css实现固定定位

用css样式来实现固定定位，使用css的position属性；其中position的属性值有absolute（生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。）、fixed（生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。）在这里我们使用fixed值，来固定导航的盒子。
再通过a标签的herf属性和name属性搭配使用，将页面跳转至固定位置。
实现效果如下：
固定定位
源代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            p{
                line-height: 60px;
            }
            #dh{
                border: 1px solid #000000;
                width: 100%;
                height: 50px;
                background-color: #FFFFFF;

                position: fixed;/*固定定位*/
                top: 0px;

            }

            #dh2{
                border: 1px solid #000000;
                background-color: #FFFFFF;
                width: 120px;
                height: 300px;

                position: fixed;
                left: 300px;
                top: 300px;
            }

            a{
                display: block;
                margin: 20px;
                text-decoration: none;
                line-height: 50px;
            }
        </style>
    </head>
    <body>

        <div id="dh2">
            <a href="#nz">女装</a>
            <a href="#man">男装</a>
            <a href="#dq">电器</a>
            <a href="">返回顶部</a>
        </div>
        <font color="red">这里是顶部</font>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <a name="nz"></a>
        <font color="red">这里是女装</font>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <a name="man"></a>
        <font color="red">这里是男装</font>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <p>这是文本内容</p>
        <a name="dq"></a>
        <font color="red">这里是电器</font>

    </body>
</html>