CSS 中的 absoult 及 position 解析

最新推荐文章于 2024-06-28 22:16:43 发布
最新推荐文章于 2024-06-28 22:16:43 发布
阅读量3.6k 收藏 3
点赞数 1
分类专栏： 前端 文章标签： position CSS 布局 div 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29580525/article/details/76485174
版权
本文深入探讨CSS中的绝对定位absolute，通过实验解析其特点：脱离标准文档流，以最近祖先定位或整个页面为基准，需配合偏移量使用。同时展示了不同情况下的定位效果，帮助理解absolute的工作原理。
摘要由CSDN通过智能技术生成

在学习CSS中，对 position 的 absoult 非常不理解，就上网找了很多资料，然后发现了这一篇文章，看完就立马明白了，特地转过来以后继续学习，谢愿博主了

 

学web开发时，看到CSS样式中定位时 absolute 非常不理解，在网上找了很多解释反而弄得我更困惑了，于是决定自己实验，找出各种关系。关于CSS定位中absolute的特点，我总结起来无非是以下几点：

1.定位position为absolute属性的容器会脱离标准文档流，可以放在整个页面的各个位置（这个当然要与其他属性结合使用）；

2.定位的标准为整个页面或者外包裹容器，同级元素不会成为absolute容器的定位标准；

3.当定位为absolute的容器的所有外包裹标签没有用position修饰的，则该容器以整个页面为标准进行定位；

4.当定位为absolute的容器的所有外包裹标签有用position修饰的，则该容器以离他最近的容器为标准进行定位；

 

首先展示一下实验的基础，以后所有的改动都是在此基础上进行的。

HTML文件如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>WebPageLayout_absolute</title>

    <link rel="stylesheet" type="text/css" href="WebPageLayout_absolute.css" />

</head>

<body>

<div id="wrap_out">

<div id="wrap_in">

<
最低0.47元/天 解锁文章
MarmotCoder
关注
专栏目录
css等高布局常用几种方式
01-19
指在同一个父容器中,子元素高度相等的布局. 从等高布局实现方式来说,又分为两类 伪等高 子元素高度差依然存在,只是视觉上给人感觉就是等高. 真等高 子元素高度相等 先来看看伪等高实现方式 通过负margin和Padding...
HTML&&CSS复习(九)
m0_66208334的博客
01-19 269
HTML&&CSS复习
使用绝对定位 position:absoult 所需要的知识点，以及 position 的简单介绍
最新发布
qq_52530691的博客
06-28 2480
CSS position 属性用于指定元素在页面中的定位方式，top 与 bottom,left 和 right 四个属性用于确定元素在页面中的具体位置。的属性值有五个，分别是： static，relative ，absolute ，fixed ，stickystatic： 该关键字指定元素的正常布局行为，并且他不受 top ，bottom，left，right 的影响，一般被称为静态定位。relative: 相对定位元素的定位是相对其 没有添加 position 属性的 位置。
CSS中position属性( absolute | relative | static | fixed )详解
wangshuai13383347132的博客
04-07 1815
我们先来看看CSS3 Api中对position属性的相关定义： static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 fixed：对象脱离正常文档流，使用to
CSS定位position总结（超详细哦！）
weixin_52625590的博客
08-01 3万+
开始学习css页面布局时，先接触到的有 **标准流 或 浮动**，但是经过后续的学习发现有些场景很难通过标准流 或 浮动来快速实现。 例如： **场景1**： 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。 **场景2**：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。 这个时候我们就需要学习新的布局方法了——`定位（position）`...............
CSS基础：position定位的5个类型详解！
u013179804的博客
04-21 2199
CSS 中的positionstatic：默认值，relative：相对定位，absolute：绝对定位，fixed：固定定位，sticky：粘性定位。因为positiontop：距离定位父元素或包含块顶部的距离。right：距离定位父元素或包含块右侧的距离。bottom：距离定位父元素或包含块底部的距离。left：距离定位父元素或包含块左侧的距离。这四个方位属性可以使用像素(px)、百分比(%)、em 等单位来指定距离，正负值皆可以。
Android中底部菜单被输入法顶上去的解决方案
01-05
这样底部菜单就不会顶上去，但是这种方法，经过我的实验，还是会被输入法顶上去，这两种方法都不要完全解决问题，还有一种是布局的问题，主页面:position:relative,底部菜单:position：absoult;这个方法在一定的时间...
DBC.rar_dbc
09-24
在深入解析 "DBC.pas" 的具体内容之前，我们需要了解 Pascal 语言的语法和结构，以及如何在 Pascal 中实现数据库连接。通常，这样的代码会包含对数据库驱动的引用，设置连接参数（如数据库地址、用户名、密码），...
CSS之position详解
BlizzardWu的博客
05-25 7129
定义和用法 position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 position属性有五个可选值，分别是absolute、fixed、relative、static、inherit： absolute: 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过left、top、right以及bottom属性进行规定。
CSS中 position 属性详解
qq_24915489的博客
10-22 296
https://blog.csdn.net/qq_34858648/article/details/74726044 代码： https://codechina.csdn.net/qq_24915489/html/-/blob/a9ea35e1df585e7abc9e4a3380bcfabdc034b220/index_relative.html https://codechina.csdn.net/qq_24915489/html/-/blob/a9ea35e1df585e7abc9e4...
css详解position五种属性用法及其含义
前端学习笔记
04-12 2万+
position（定位） position — 作为css属性三巨头（position、display、float）之一，它的作用是用来决定元素在文档中的定位方式。其属性值有五种，分别是 — static（正常定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）、sticky（粘性定位）。 static（正常定位） static(正常定位) 是元素position属性的默认值，包含此属性的元素遵循常规流1。 正常定位呈现常规流的示例html代码： <!DOCTYP
CSS属性 Position的几种定位方式
WangMin@汪末末
09-18 6949
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 在讲几种定位方式之前，我们先来了解一下什么是普通流(normal flow)？ 除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。 position 属性的作用 position 用于定位盒子对象，有时一个布局中几个小对象，不易用css paddin
定位position（绝对定位absolute 相对定位 relative）
爱玩亚索的程序员
03-18 1万+
文章目录定位固定定位相对定位绝对定位粘性定位 定位 固定定位 position 规定元素的定位方式(类型) static 默认值，没有定位(写和不写一样) fixed 固定定位，会让元素生成 固定定位的元素 固定定位元素 永远是根据 浏览器的显示窗口 作为 定位位置的参考起点的 特点： 1、固定定位会使元素脱离文档流 2、元素在成为固定定位后，在没有规定固定宽度的情况下，宽高由内容撑开 3、固定定位会使元素产生块级框，不论任何类型的元素使用了固定定位后就都可以设置宽高了
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
csgojingyu的博客
10-21 1万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
position(五种属性，以及每个属性的特点)
Delicia_Lani的博客
10-28 2万+
1. position: relative;相对定位 1> 不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性） 2> 不会使元素脱离文档流（元素原本位置会被保留，即改变位置也不会占用新位置） 3> 没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移） 4>提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越...
position:absolute详解
热门推荐
xiaobing_hope的专栏
12-13 11万+
position：absolute日常开发中经常涉及元素的定位，我们都知道，绝对定位相对于最近position不为static的父级元素来定位，但其中定位的位置还是有细微的差别的。绝对定位根据left和top属性来规定绝对定位元素的位置。 但这个位置实际上与padding和父级相对定位的box-sizing有关的。* 默认盒子的box-sizing为content-box（即盒子所占据的宽度=wi
CSS Position 定位
Auto
11-29 838
文章目录CSS Position 定位#1 说明#1.1 什么是Position塌陷#1.2 什么是文档流(normal flow)#2 开始#2.1 position: static#2.2 position: relative#2.3 position: absolute#2.4 position: fixed#2.5 position: sticky CSS Position 定位 #1 说...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值