绝对定位不使用left,right,top,bottom等属性

最新推荐文章于 2024-06-15 23:21:25 发布

Buliang_C

最新推荐文章于 2024-06-15 23:21:25 发布

阅读量2k

点赞数

分类专栏： CSS 文章标签： css html js

本文链接：https://blog.csdn.net/o__o__o__o/article/details/117355472

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文探讨了绝对定位下块级和行内元素的不同定位效果，强调了仅设置position:absolute时元素的定位规则，并揭示了left/top与right/bottom属性对定位的影响。重点讲解了元素如何根据定位父元素和文档流进行调整。

摘要由CSDN通过智能技术生成

前言

在做页面布局的时候，用到绝对定位，但是发现在设置left,right,top,bottom等属性后，可以正常进行定位；但是如果仅加上position: absolute的话，而不设置left,right,top,bottom等属性的话，当前元素怎么样都没法覆盖到上层元素。
绝对定位的元素会过根据最相近的定位元素进行定位，如果当前需要被定位的元素没有已定位的祖先元素作为参考值，则相对于html进行定位。脱离文档流，不会占据文档空间。

初始测试代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>绝对定位</title>
    <style>
        body,
        div,
        dl,
        dt,
        dd,
        ul,
        ol,
        li,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        pre,
        code,
        form,
        fieldset,
        legend,
        input,
        textarea,
        p,
        blockquote,
        th,
        td,
        hr,
        button,
        article,
        aside,
        details,
        figcaption,
        figure,
        footer,
        header,
        hgroup,
        menu,
        nav,
        section {
            margin: 0;
            padding: 0;
        }

        body {
            position: relative;
            width: 500px;
            margin: 0 auto;
        }

        p {
            background: aqua;
            border: 3px solid blue;
        }

        span {
            width: 100px;
            height: 200px;
            background: red;
            border: 1px solid black;
        }
    </style>
</head>

<body>

    <h1>Absolute positioning</h1>


    <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>


    <p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our
        margins, not both.</p>

    <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and
        adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line
            if possible — like this one containing text</span>, or just go on to a new line if not, much like this image
        will do: <img src="long.jpg"></p>

    <span class="positioned">Now I'm absolutely positioned, I'm not playing by the rules any more!</span>
</body>

</html>

一、测试元素为块级元素p：

对比不加position: absolute和加上position:absolute的区别。

当前的p标签元素没有加绝对定位，仅显示黄色背景色，在正常的文档流中显示。

.positioned {
	background: yellow;
}

在这里插入图片描述

当前的元素仅加上position: absolute;

.positioned {
	position: absolute;
	background: yellow;
}

在这里插入图片描述
块级元素，在不加position: absolute和仅加上position:absolute在布局上没有什么区别。

二、当测试的元素换成行内元素span

对比不加position: absolute和加上position:absolute的区别。

span标签元素，不添加任何定位属性，默认是static静态定位，处于最基础的文档流的位置。

.positioned {
	background: yellow;
}

在这里插入图片描述

加上position:absolute;之后，当前的行内元素直接转换成块级元素出现，有了设置的宽和高。但是并不会覆盖上层元素，仍然存在于原始文档流的位置，位置并没有发生偏移。

.positioned {
	position: absolute;
	background: yellow;
}

在这里插入图片描述
行内元素，在不加position: absolute和仅加上position:absolute在布局上有区别，绝对定位会让行内元素变为块级元素。

三、只是设置left或者right属性（下面都以行内元素span进行定位测试）

.positioned {
	position: absolute;
	background: yellow;
	left: 20px;
}

当前的元素向右平移20px的像素，以最近的父元素，也就是body元素为当前的初始起始左边缘。但不会覆盖上面的普通文档流元素。
在这里插入图片描述

四、只是设置top或者bottom属性（下面都以行内元素span进行定位测试）

.positioned {
	position: absolute;
	background: yellow;
	top: 20px;
}

当前的元素向下平移20px的像素，同样以最近的父元素，也就是body元素为当前的初始起始上边界。同时会覆盖普通的文档流元素。
在这里插入图片描述

总结

通过上面可知，一个元素绝对定位，如果只设置left 或right , 他会在有定位的父级内，如果没有，则直接以body为定位父级元素。在正常文档流位置的基础左右移动。
如果只设置top 或botttom,则在正常文档流决定的位置上下移动。

Buliang_C

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
绝对定位不使用left,right,top,bottom等属性

在做页面布局的时候，用到绝对定位，但是发现在设置left,right,top,bottom等属性后，可以正常进行定位；但是如果仅加上position: absolute的话，而不设置left,right,top,bottom等属性的话，当前元素怎么样都没法覆盖到上层元素。绝对定位的元素会过根据最相近的定位元素进行定位，如果当前需要被定位的元素没有已定位的祖先元素作为参考值，则相对于html进行定位。脱离文档流，不会占据文档空间。
复制链接

扫一扫

专栏目录