元素的定位

2023-10-16 20:53:07 浏览数 (2)

一、定位概念

HTML的定位默认从上到下，垂直排列，也有水平排列的布局

这就是普通的文档流采用的定位方式，块元素默认占满一行，块元素之间从上到下排列，垂直排列，块元素有div，p，h1等，如下图，6个div，每个div占满一行

代码如下：

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            border: 1px solid orange;
        }
    </style>
</head>
<body>
    <div class="box">box1</div>
    <div class="box">box2</div>
    <div class="box">box3</div>
    <div class="box">box4</div>
    <div class="box">box5</div>
    <div class="box">box6</div>
</body>
</html>

内联元素默认采用水平排列的方式，从左往右依次排列，一行占满会切换到下一行继续排列，如下图，6个span，每个span只占用自身文字的宽度，从左往右依次排列

代码如下：

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            border: 1px solid orange;
        }
    </style>
</head>

<body>
    <span>span1</span>
    <span>span2</span>
    <span>span3</span>
    <span>span4</span>
    <span>span5</span>
    <span>span6</span>
</body>

</html>

一、定位种类

普通流定位

  1. 每个块元素都有自己的空间
  2. 块元素都是从父元素左上角开始排列的
  3. 块元素都是从上到下排列的，且每个块元素独占一行

浮动定位：

  1. 让元素脱离默认文档流，浮动在其他元素上层
  2. 并向一个指定方向漂浮
  3. 直到碰到父元素边界或另外一个浮动元素的阻挡才停止

二、浮动定位

浮动定位的实现是通过css的float属性，属性值为

left：让元素左浮动

right：让元素右浮动

none：不浮动（默认）

通过一个小练习来加深一下浮动布局，使用无序列表元素实现下图的布局

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul li{
            float: left;
            font-size: 12px;
            line-height: 12px;
            padding: 0 6px;
            border-right: 1px solid #666;
        }
        li.no_line{
            border: none;
        }
    </style>
</head>
<body>
    <ul>
        <li>首页</li>
        <li>注册</li>
        <li>购物车</li>
        <li>我的收藏</li>
        <li>消息</li>
        <li class="no_line">商城小程序</li>
    </ul>
</body>
</html>

浮动定位会给文档流带来很多麻烦，初学者往往很容易被浮动搞得晕头转向，后续会专门针对浮动来进行细化，并讲解怎么清除浮动带来的文档流的影响

三、相对定位

css的相对定位使用position: relative;实现

设置了相对定位的元素无论是否进行了移动，元素仍然占据原来的空间，移动后的元素如果有存在普通文档流元素，会将普通文档流元素进行覆盖，这个概念该怎么理解呢，我们通过实际的案例来进行理解

未设置相对定位时文档布局效果
代码语言：javascript复制
position: relative;
top: 0px;
left: 200px;

发现box1移动到右侧了，但是box2没有往上移动，这说明box1虽然偏移了原来的位置，偏移前的元素所占的空间仍然被占据

四、绝对定位

css的绝对定位实现采用posititon: absolute;实现

设置了绝对定位的元素脱离文档流，不占用原来元素在文档流中的位置，我们通过实际案例进行理解，还是拿上述未设置相对定位时的box1和box2来举例，我们接下来在box1上设置绝对定位的相关属性

代码语言：javascript复制
position: absolute;
top: 0;
left: 200px;

设置后的效果图如下

可以看到box1偏移了位置，box2顶上去了，占用了原来box1所在的位置

五、层叠顺序

css设置层叠顺序使用z-index属性实现，具体格式如下

代码语言：javascript复制
z-index: 数值

html默认是从上往下依次渲染，所以后渲染会覆盖之前已经渲染过的元素，但是增加了z-index属性了就不一样了，数值越大越靠前，数值大的会盖住数值小的元素，但是使用上需要注意：只有设置了position属性的元素设置z-index才生效，否则无论你设置z-index属性的数值多大都没用，现在我们通过一个案例来加深一下理解

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
</body>
</html>

运行效果图

我们分别对三个元素设置响应的属性

box1: 设置绝对定位，距离顶部0像素，距离左侧0像素

代码语言：javascript复制
position: absolute;
top: 0px;
left: 0;

box2：设置绝对定位，距离顶部50像素，距离左侧50像素

代码语言：javascript复制
position: absolute;
top: 50px;
left: 50px;

box3：设置绝对定位，距离顶部100像素，距离左侧0像素

代码语言：javascript复制
position: absolute;
top: 100px;
left: 0px;

运行效果图如下

我们可以看到box2盖住了box1的部分内容，box3盖住了box2的部分内容，符合文档从上往下顺序渲染的机制，现在我们对box2设置z-index属性

代码语言：javascript复制
z-index： 1

可以看到设置了z-index属性的box2浮动到了box1和box3元素的上层，我们接下来对box1也设置一下z-index属性

代码语言：javascript复制
z-index： 2

可以看到box1覆盖到了box2的上层，因为box1设置的z-index的属性值比box2设置的要大，所以box1处于最顶层

总结z-index使用的注意事项

  1. 父子元素之间使用z-index无效
  2. 只有设置了position属性的元素设置z-index才有效

六、固定定位

css通过设置position: fixed;来实现元素的固定定位，比如网页中经常出现的“回到顶部”的按钮，或者导航工具条等，例如京东的页面

上图中箭头标识的组件就是使用固定定位，一般设置固定定位的元素需要设置如下属性

代码语言：javascript复制
position: fixed;
top: 20px;
right: 100px;

我们通过实际案例来理解下，代码如下

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .back{
            position: fixed;
            width: 70px;
            height: 30px;
            top: 20px;
            right: 100px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <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>
    <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>
    <p>这是一段测试文字，这是一段测试文字，这是一段测试文字，这是一段测试文字，这是一段测试文字，这是一段测试文字。</p>
    <div class="back">回到顶部</div>
</body>
</html>

运行效果如下，发现如果右侧的滚动条在什么位置回到顶部的按钮总是在固定的位置

html 渲染 width 布局 测试

0 人点赞