position有几种,absolute和relative的区别

标签(空格分隔): 博文


position有几种,absolute和relative的区别

1.static(默认属性),当没有给元素设置position时默认为static 2.absolute(绝对定位),相对于父级第一个设置了position属性进行定位(没有则相对于body,static除外),top,left,bottom,right均是相对于这个父元素的偏移量 3.relative(相对定位),在元素原来的位置上进行定位,top,left,bottom,right的值相当于原来位置的偏移量 4.fixed(固定定位),相对于浏览器视口的定位,不会随着滚动条的滚动而滚动,top,left,bottom,right的值相当于浏览器窗口的定位

区别

1.absolute和relative都会使元素脱离文档流,但不同的是,absolute脱离文档流后不会占用原来的位置,而relative会在原来的位置上留下一个副本占用原来文档流的位置 2.absolute的父元素设有position时,top,left,bottom,right会忽略父级元素的padding值,即始终与父级元素的左上角进行定位,且其层级会始终比父级高,无论父级设置多大的z-index,但relative的定位会受父元素padding值影响 3.absolute是以第一个设置了position的父元素或祖先元素进行定位,而relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式

其他

1.块状化 使用定位的元素的display计算值就是block或table 2.破坏性 脱离原始文档流 3.包裹性 absolute天然具有包裹性,即不用同时设置以下代码

div{
    display: inline-block; //没必要
    position: absolute;
}

4.当同时使用absolute和float时,会忽略float的值 举个例子

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<style type="text/css">
		div{
			width: 300px;
			height: 300px;
		}
		.outer{
			position: absolute;
			background-color: #F5C4C4;
			z-index: 9999;
			margin: 50px;
			float: left;  /*被忽略*/
		}
		.inner{
			position: absolute;
			background-color: #8E1818;
			left: 50px;
			top: 50px;
		}
	</style>
</head>
<body>
	<div class="outer">
		<div class="inner"></div>
	</div>
</body>
</html>

效果如图

参考链接 CSS+DIV布局中absolute和relative区别

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏静默虚空的博客

HTML 简介

HTML 简介 超文本标记语言  (Hypertext Markup Language, HTML)  是一个可以用来结构化你的Web内容并给予其含义和目标的...

22890
来自专栏数据结构与算法

08:石头剪刀布

08:石头剪刀布 总时间限制: 1000ms 内存限制: 65536kB描述 石头剪刀布是常见的猜拳游戏。石头胜剪刀,剪刀胜布,布胜石头。如果两个人出拳一样,...

46970
来自专栏DeveWork

解决Chrome或其它WebKit浏览器input和textarea的黄色/蓝色边框问题

之前在折腾主题的时候发现一个很怪的现象,在Chrome浏览器下,输入框有一个黄色的边框;而在其它WebKit浏览器(如Jeff使用的傲游浏览器)下,输入框的颜色...

30760
来自专栏李蔚蓬的专栏

3.2 自定义控件基础 之 View的测量

在现实生活中,如果我们去画一个图形,就必须知道它的大小和位置。Android系统在绘制View之前也必须对View进行测量,即告诉系统该画一个多大的View。这...

9830
来自专栏十月梦想

jquery高级选择器第一部分

        上一篇简单的介绍了jquery的基础选择器,准备把高级选择器部分分为三篇博文介绍!慢工出细活吗,循序渐进相信jq会和css一样顺手,废话不少了接...

6920
来自专栏自动化测试实战

《selenium2 python 自动化测试实战》(3)——操作测试对象

30760
来自专栏无原型不设计

简单三步实现banner的轮播效果

目前有很多人使用Axure做轮播效果,步骤略复杂了些。这里,抛开其他设计原型不说,只说说banner图片轮播,三步教你实现轮播效果,我用的原型图软件是Mockp...

368100
来自专栏十月梦想

bootstrap表格

条纹表格.table-striped(作用在table的class类名),实现隔行换色

9420
来自专栏编程

前端学习自学笔记:day01

在这里要跟大家说声抱歉,本人拖更太久啦.现在在自学前端,我每天会把自己的总结笔记发上来分享给大家,希望对大家有帮助. 在此之前先为大家显示下前端工程师的路线图:...

21850
来自专栏coding

事件修饰符

15140

扫码关注云+社区

领取腾讯云代金券