相对定位和绝对定位的搭配使用

最新推荐文章于 2022-09-27 09:19:54 发布

小新大人y

最新推荐文章于 2022-09-27 09:19:54 发布

阅读量3.1k

点赞数 1

分类专栏： html css 文章标签： html div pozation 块相对定位绝对定位和固定定位

本文链接：https://blog.csdn.net/qq_44885374/article/details/89367801

版权

css 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

相对定位：relative; 绝对定位：absollute; 固定定位：fixed;
先定位两个块

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .par{
            margin: auto;
            width: 300px;
            height: 300px;
            background: salmon;
        }
        .child{
            margin: auto;
            width: 150px;
            height: 150px;
            background: slateblue;
        }
    </style>
</head>
<body>
<div class="par">
    <div class="child"></div>
</div>
</body>
</html>

在这里插入图片描述
如果想调整小框或大框的位置，我们可以利用相对定位position:relative和绝对定位pozation: absolute，

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .par{
            position: relative;
            margin: auto;
            width: 300px;
            height: 300px;
            background: salmon;
        }
        .child{
            position: absolute;
            bottom: 0;
            left: 0;
            margin: auto;
            width: 150px;
            height: 150px;
            background: slateblue;
        }
    </style>
</head>
<body>
<div class="par">
    <div class="child"></div>
</div>
</body>
</html>

我这里给的是小框相对于大框bottom:0; left:0;这里根据你对框位置的需要来写属性有：top bottom left right z-index(z-index是是对框上下位置的调整，也就是z轴的坐标位置）
top是相对于相对位置的距离上边的距离，其他的几个属性类同。
在这里插入图片描述另外，还有一个固定定位的使用pozation:fixd;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .par{
            position: relative;
            margin: auto;
            width: 300px;
            height: 300px;
            background: salmon;
        }
        .child{
            position: absolute;
            bottom: 0;
            left: 0;
            margin: auto;
            width: 150px;
            height: 150px;
            background: slateblue;
        }
        .fix{
            position: fixed;
            right: 0;
            top: 30px;
            width: 30px;
            height: 500px;
            background: seagreen;
        }
    </style>
</head>
<body>
<div class="par">
    <div class="child"></div>
    <div class="fix"></div>
</div>
</body>
</html>

固定定位在浏览器中是不随滚动条动的，也就是说它的位置是固定不变的。
在这里插入图片描述

小新大人y

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
相对定位和绝对定位的搭配使用

相对定位：relative; 绝对定位：absollute; 固定定位：fixed;先定位两个块<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> ...
复制链接

扫一扫