绝对定位和相对定位的区别?
一:绝对定位
position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素)。如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含块(body)。
绝对定位与文档流无关,所以它们可以覆盖页面上其他的元素,可以通过z-index属性来控制这些层的对方顺序。
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
二:相对定位
position: relative;相对定位:相对定位是相对于元素在文档中的初始位置;
注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
注意:position:absolute,float会隐式地改变display的类型(display:none除外)。即是当元素设置position:absolute、float:left、float:right中任意一个时,都会让元素以display:inline-block的方式显示(特点是:可以设置长宽,默认宽度不占满父元素)。这时,即使故意设置display:inline; display:block都是无效的。
但是float在IE6下的双边距bug就是用display:inline; 来解决的。
position:relative不会隐式改变display的类型。
绝对定位和相对定位的区别?相关推荐
- CSS中绝对定位和相对定位的区别及作用
CSS中绝对定位和相对定位的区别及作用 针对定位的区别及使用我整理一些方法 一.绝对定位 二.相对定位 三.绝对定位与相对定位的区别 四.绝对定位与相对定位的使用 结语 针对定位的区别及使用我整理一些 ...
- CSS中,position的绝对定位和相对定位的区别
CSS中,position的绝对定位和相对定位的区别 1.position的四个值:static.relative.absolute.fixed 绝对定位:absolute和fixed统称为绝对定位 ...
- 关于绝对定位与相对定位的区别和用法
Hello大家好,我们这次来详细说下关于绝对定位以及相对定位的知识. 相对定位及其用法 顾名思义相对定位的意思是相对于该控件相对于之前的位置进行偏.相对定位的css样式代码是这样的:position: ...
- css中的定位以及绝对定位和相对定位的区别
一:绝对定位 (position: absolute) 绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是 ...
- 绝对定位和相对定位的区别(详解)
一:绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对 ...
- 绝对定位和相对定位的区别
相对定位与绝对定位 相对定位 绝对定位 相对定位 每一个元素都可以看作一个盒子,文档流就是由这些盒子堆砌而成,而每个盒子都在这个文档流中占据了一个位置,如果我们把这个盒子设置成相对定位,那么就可以拿起 ...
- CSS position中 绝对定位和相对定位的区别以及占位问题
!DOCTYPE html> <html><head><meta charset="utf-8"><title>CSS中的盒子 ...
- CSS中定位(带你实操代码掌握固定定位、绝对定位与相对定位(子绝父相))
https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 目录 固定定位 绝 ...
- css导航栏固定顶部两种情况,及绝对定位,相对定位,固定定位和粘性定位的特性及区别
绝对定位,相对定位,固定定位和粘性定位的特性及区别,我整理一下放在文章最下面了,不用死记硬背,理解一下就ok,需要的话可以看看. 当导航栏头部没有别的模块时,想要滑动过程中导航栏一直在顶部,有两种写法 ...
最新文章
- 交易所频频被盗,你该如何保护自己的数字资产?
- iOS RunLoop简介
- 程序员如何让自己的程序少出BUG- [工作]
- 【转】JavaScript事件顺序
- [android] No resource found that matches the given name 'Theme.AppCompat.Light'
- iOS之深入探究CADisplayLink和NSTimer的对比和内存溢出问题
- dos常用文件操作命令
- 一个XML转换的例子
- bzoj2878 [Noi2012]迷失游乐园——概率期望DP
- 计算机信息处理工具教案设计,《信息和信息处理工具》教案设计
- pycharm 连接SQL
- apache 开启 网页压缩
- C语言中printf格式输出
- ahocorasick库的简单使用
- 【Linux】报错:cp: omitting directory...
- 【单片机】唯一设备ID UID固件加密
- ACL20|MART: Memory-Augmented Recurrent Transformer for Coherent Video Paragraph Captioning
- h5 app 实现页面刷新
- DNS云学堂 | 权威DNS那些事儿(上)
- 1.1.3 数组——x的平方(Leetcode 69)