HTML（div块定位）

HTML（div块定位）块定位可以通过在选择器内设置position属性实现块在浏览器页面内部的摆放位置，可以自己设置位置绝对定位相对定位相对浏览器定位一、定位方式1.绝对定位绝对定位，position属性值为absolute，之后再设置top、right、bottom、left四个方向的值top和bottom可能会有冲突，不设置其一也可以，左右一样在原有的块标签位置移动之后，原位置被释放，可以被

文章共1,134字 · 阅读需要大约4分钟

一键AI生成摘要，助你高效阅读

问答

叮定

18590人浏览 · 2021-03-25 20:44:54

叮定 · 2021-03-25 20:44:54 发布

HTML（div块定位）

块定位可以通过在选择器内设置position属性实现块在浏览器页面内部的摆放位置，可以自己设置位置
绝对定位
相对定位
相对浏览器定位

一、定位方式

1.绝对定位
绝对定位，position属性值为absolute，之后再设置top、right、bottom、left四个方向的值
top和bottom可能会有冲突，不设置其一也可以，左右一样
在原有的块标签位置移动之后，原位置被释放，可以被其他块标签占用

  <style>
        .d1,.d2,.d3{
            width: 150px;
            height: 150px;
        }
        .d1{
            background-color: aquamarine;
            position: absolute;
            top:200px;
            left:200px ;
        }
        .d2{
            background-color: cadetblue;
        }
        .d3{
            background-color: darkslategray;
        }

在这里插入图片描述
2.相对定位
相对定位使相对于原来的位置对块标签进行设置，块标签的位置移动之后，原有位置不被释放，不能被其他块占用
position属性值为relative

 position: relative;
 top:150px;
 left:150px ;

在这里插入图片描述
3.相对浏览器定位
块定位之后，忽视浏览器页面的上下滑动，永远都停留在浏览器屏幕的某个位置
position属性值为fixed

 .d3{
     background-color: darkslategray;
     position: fixed;
     top: auto;
     right: 0px;
 }

在这里插入图片描述

二、所有源码及结果

1.源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        .d1,.d2,.d3{
            width: 150px;
            height: 150px;
        }
        .d1{
            background-color: aquamarine;
            position: absolute;
            top:150px;
            left:150px ;
        }
        .d2{
            background-color: cadetblue;
            position: relative;
            top:150px;
            left:150px ;
        }
        .d3{
            background-color: darkslategray;
            position: fixed;
            top: auto;
            right: 0px;
        }

    </style>
</head>
<body>
<!--绝对定位-->
<div class="d1">1</div>
<!--相对定位-->
<div class="d2">2</div>
<!--相对浏览器定位-->
<div class="d3">3</div>
</body>
</html>