css中相对定位和绝对定位

定位标签：position
包含属性：relative（相对） absolute（绝对）

1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）

2.position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）

3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父容器左上角

4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右

转载于:https://www.cnblogs.com/BeyondWang/p/4065308.html

css中相对定位和绝对定位相关推荐

CSS中相对定位与绝对定位
绝对定位: absolute, fixed 相对定位: relative 默认值: static <!DOCTYPE html> <html><head><m ...
html中的相对和绝对定位,实例讲解CSS中相对定位和绝对定位的用法和区别
一.相对定位相对定位是指,该元素相对自己原来位置,偏移一定距离,元素可以通过顶部top,底部bottom,左侧left和右侧right属性来设置定位.它相对的是它自己. 举例:大div里面包含5个小 ...
CSS 中，为什么绝对定位（absolute）的父级元素必须是相对定位（relative）？
问题: CSS 中,为什么绝对定位(absolute)的父级元素必须是相对定位(relative)? 搞清楚了,正确的应该是只要父级元素=设置了position值(absolute或者relative ...
详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位一.Static 静态定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,这个时候你给这个元素设置的left,r ...
html中相对定位怎么写,html中相对定位与绝对定位
来讲讲html中相对定位与绝对定位,有的后端同学对html的相对定位与绝对定位,不太熟的福利来了,本篇对于html的相对定位与绝对定位讲的很详细呢! html是整个文档空间,body是html中的文档 ...
html相对定位不占位置,CSS position 相对定位和绝对定位
一.position 的四个值:static.relative.absolute.fixed. 绝对定位:absolute 和 fixed 统称为绝对定位相对定位:relative 默认值:stat ...
css的相对定位和绝对定位
css标签的相对定位和绝对定位是通过position属性来控制的,相对定位和绝对定位不改变元素的大小形状,只改变元素的位置. 一.position属性的值有以下几种: static:默认值,没有定位, ...
html5 中相对定位和绝对定位
-------之前一直很迷茫css中position定位属性,想把一个图片浮动到另一个图片上总是办不到,之前看到了一篇绝对定位相对定位的详解感觉很不错,看不懂的同学可以空降过去. 绝对相对定位都是和 ...
看完这个，css中position的绝对定位相对定位就懂了
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

css中相对定位和绝对定位

css中相对定位和绝对定位

css中相对定位和绝对定位相关推荐

最新文章

热门文章