关于HTML定位

Viper 3

已于 2023-11-02 11:40:33 修改

阅读量37

点赞数

分类专栏：学习笔记（一）文章标签： html 前端

于 2023-11-02 11:29:11 首次发布

本文链接：https://blog.csdn.net/dargon_11/article/details/134178144

版权

学习笔记（一）专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言

本文要介绍的是html&CSS中的元素的定位，通过元素的定位我们可以去更好的将盒子放到我们想要的位置。下面就让我们一起来看看吧。

一、什么是定位

定位：position属性，可以让我们将元素从文档流中取出，然后使用方位词属性（left top right bottom）精准的控制它的位置。

不同的定位值可以使元素拥有不同的表现形式，例如放在另外一个元素上面或者固定在浏览器的显示区某个位置

二、定位的分类和取值

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed	    生成固定定位的元素，相对于浏览器窗口进行定位。
relative	生成相对定位的元素，相对于其正常位置进行定位。
static	    默认值。没有定位，元素出现在正常的流中。

其中静态定位是默认的样式，元素保持原来的性质去排列放置，所以就不去做详细的说明了。下面让我们来看一下相对定位、绝对定位和固定定位。

1.相对定位（relative）

相对定位能让元素保持原文本流位置的同时，可以通过方位属性进行相对于原位置的偏移。

特点：

不会脱离文档流

不影响元素本身的任何特性

如果不加方位词偏移那么没有任何影响

2.绝对定位（absolute）

绝对定位能让元素脱离文档流，使用方位属性相对于最近的有定位的父级元素进行偏移。

注意！方位属性初始值不是0，而是auto。

方位属性left和top 优先级比 right和bottom高，比如一个元素既拥有left也拥有right，最终位置以left为准。

特点：

脱离文档流

元素宽高默认值为0

找不到最近的定位父级则相对于body标签

一般配合相对定位使用（参照物）

会将元素转换成块元素

设置了绝对定位,没有设置层级;html后写居上

margin:auto 暂时失效

基点（起始点/坐标原点）：

绝对定位的基点是会往父元素找，如果父元素是相对定位（relative ）就以此为基点，如果不是的话就继续往上找，直到html元素为止。

绝对定位的元素跟浮动元素是有点相似的，但绝对定位是完全脱离文档流。

应用场景

1.元素不会占据页面空间

2.元素需要移动到指定位置

3.固定定位（fixed）

固定定位能让元素脱离文档流，使用方位属性相对于浏览器可视区进行偏移；

特点：

脱离文档流

元素宽高默认值为0

margin:auto失效

固定定位的基点（起始点）就是当前视口的起始点，换句话说就是当前页面的大小，默认视口大小=body 大小=html大小

应用场景：

位置固定，不会随着页面滚动而滚动

三、示例

下面，我们通过一个示例来加深一下对定位的理解：

首先，我们写一个网页的导航.

期望效果：顶部导航栏随滚动条滚动不移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px; padding:0px; list-style: none;
        }
        .container{
            width: 726px;
            height: 8000px;
            background-color: pink;
            margin:0 auto;
        } 
        .container ul{
            position: fixed;
            /* 固定定位 */
            top: 0px；
        }
        .container ul li{
            /* 右边框 */
            border-right: 1px solid white;
            width: 120px;
            height: 50px;
            /* 文字水平居中 */
            text-align: center;
            /* 文字垂直居中 */
            line-height: 50px;
            font-size: 20px;
            /* 设置左浮动 导航横向排布 */
            float: left;
            background-color: rgb(120, 120, 203);
        }
        .container ul li a{
            color: aliceblue;
            /* 清楚下划线 */
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div style="height:300px;"></div>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">亲子旅游</a></li>
            <li><a href="#">居家生活</a></li>
            <li><a href="#">宠物生活</a></li>
            <li><a href="#">美食酒水</a></li>
            <li><a href="#">个护清洁</a></li>
        </ul>
    </div>
</body>
</html>

在我们运用固定定位后：

   .container ul{
            position: fixed;
            /* 固定定位 */
            top: 0px; }

效果如图：

总结

以上就是关于HTML中定位的全部内容了，通过定位可以在不同需求下使用不同的方法，从而使你的界面设计更加得心应手，希望本文能对大家有所帮助。

Viper 3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于HTML定位

本文要介绍的是html&CSS中的元素的定位，通过元素的定位我们可以去更好的将盒子放到我们想要的位置。下面就让我们一起来看看吧。position属性，可以让我们将元素从文档流中取出，然后使用方位词属性（）精准的控制它的位置。不同的定位值可以使元素拥有不同的表现形式，例如放在另外一个元素上面或者固定在浏览器的显示区某个位置以上就是关于HTML中定位的全部内容了，通过定位可以在不同需求下使用不同的方法，从而使你的界面设计更加得心应手，希望本文能对大家有所帮助。
复制链接

扫一扫