0.相对定位relative特点

相对定位relative元素总是会占据位置，所占据的位置是在relative元素没有设置left/top/right/bottom属性时的位置；

相对定位relative元素在设置定位时，不会影响其他元素；

相对定位relative元素在设置定位时，是相对于自身的定位

<div class="page"><div class="backTop">position:relative</div><div class="normal">position:normal</div>
</div>

.page {width: 600px;height: 600px;background-color: #ccc;margin: 100px auto;
}
.backTop {width: 300px;height: 300px;background-color: #f34;position: relative;left: 100px;top: 100px;
}
.normal {width: 200px;height: 200px;background-color: #3f2;
}

1.relative与absolute

1.限制定位

absolute元素的定位效果会受relative的限制，当然也会受到absolute/fixed的限制

2.限制层级z-index

大家都知道relative会限制absolute元素的定位，但是知道relative还会限制absolute的层级的人，可能就不是那么多了。

3.限制absolute元素在overflow:hidden里的显示

CSS属性之relative相关推荐

CSS入门-五个简单,但有用的CSS属性
今天说的这5个CSS属性,你可能会很熟悉,但是你可能会很少会去使用.这个教程所讲得不是关于CSS3的属性,而是依旧使用CSS2属性来说明,这些属性广泛的被各种浏览器所支持:clip,min-heigh ...
DW中CSS属性详解
作者:未知来源:5D多媒体在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性,Dreamweaver把这些属性分为Type(类型).Background(背 ...
前端笔记（7）css属性书写顺序，布局流程，chrome调试工具
css样式表/层叠样式表(5) css属性书写顺序布局流程 chrome调试工具 css属性书写顺序布局定位属性 display / position / float / clear / visi ...
CSS 相对|绝对(relative/absolute)定位系列（一）
一.有话要说以前写内容基本上都是:眼睛一亮--哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...
常用的CSS属性的英文单词总结及用法、解释
1.(盒子)布局排版类 - TOP float - 浮动:设置块元素的浮动效果.可选常用到参数left.right : width - 宽:确定盒子本身的宽度,可以使盒子的宽度不依靠它所包含的内容多少 ...
[转][HTML]css属性
1.字体属性(type) font-family(使用什么字体) font-style(字体的样式,是否斜体):normal/italic/oblique font-variant(字体大小写):no ...
CSS属性之attr()
attr()准确的说,不应该是一个属性,而是一个CSS的函数,我们先看看MDN上的介绍吧: Summary The attr() CSS function is used to retrieve th ...
CSS属性和值--备份
CSS 属性和值属性 / 值描述和注释 background 任何 background-attachment.background- color.background-image.backgr ...
解析CSS属性之pointer-events
今天接到一个给页面增加水印的需求.最开始使用绝对定位 position: absolute + z-index + opacity 方式实现了第一版,可以添加水印,但是鼠标事件的目标总是在水印容器元素 ...
html实现点赞效果,HTML+CSS入门点赞功能实现 $(tag).css('属性', '样式')
本篇教程介绍了HTML+CSS入门点赞功能实现 $(tag).css('属性', '样式'),希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1. 创建标签 docume ...

CSS属性之relative

0.相对定位relative特点

1.relative与absolute

1.限制定位

2.限制层级z-index

CSS属性之relative相关推荐

最新文章

热门文章