CSS 中的定位：relative,absolute

今天碰到一个定位问题，问题解决不好，于是花了大量的时间，调试了好久，得出了一些结果：

1、如果有两个不交叉的盒子位于一个大盒子里面，位于上边的盒子的定位为relative，而下边的那个盒子的定位则是position的话，那么relative的盒子居上，position的盒子会被relative挤下来的，如果position的盒子设定了top或left属性的话，那它会覆盖在relative的盒子之上，则它是相对最外层的盒子而定位的。

2、如果有两个不交叉的盒子位于一个大盒子里面，位于上边的盒子的定位为position，而下边的那个盒子的定位则是relative的话，那两个盒子会相互覆盖。也就是说里面的这两个例子全是相对最外面的大盒子而定位的。

转载于:https://www.cnblogs.com/xinzhuangzi/archive/2009/10/02/4100667.html

CSS 中的定位：relative,absolute相关推荐

CSS中position属性(relative,absolute,fixed)和display中的inline-block
前言平时很少写CSS,用的多也就是Bootstrap来堆样式,写起来快一点,但是有时候需要自己写,很久没写容易忘记,这里记录下这两个常用属性position和display 这里贴一条CSDN设置图 ...
css中position属性（absolute/relative/static/fixed）
css中position属性(absolute/relative/static/fixed): position:static 无特殊定位,是html元素默认的定位方式,对象遵循正常文档流.top ...
html本文框百分比定位,HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点...
1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图: 以盒子中心为基准,为每条边的正方向,例: 向右移动20px : 代码为left:20px;或者right:- ...
CSS中position的relative和absolute.
2021 first note CSS中position的relative和absolute. 之前接触过, 听老师讲的时候, 赶脚自己挺明白的, 后来就放下了, 最近又开始复习, 发现有些熟悉但更多 ...
CSS中Position定位属性的使用
文章目录 CSS中定位属性的使用 position:absolute position:relative position:fixed position:sticky position:static ...
CSS中固定定位、相对定位、绝对定位以及flex布局高效定位
CSS中固定定位.相对定位.绝对定位以及flex布局高效定位一.固定布局将元素固定到一个位置,不管屏幕怎样移动,元素的位置不移动. <style>body {height: 3000p ...
php css定位到图片上,CSS_浅谈css中图片定位之所有图标放在一张图上，如今做网页为了使网站丰富多 - phpStudy...
浅谈css中图片定位之所有图标放在一张图上如今做网页为了使网站丰富多彩,富于表现力,往往需要应用大量的图片/图标.如何处理这些图片,使其尽量不影响网页载入,解析等速度,是一个不大不小的问题.如果你的 ...
HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点
1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图: 以盒子中心为基准,为每条边的正方向,例: 向右移动20px : 代码为left:20px;或者right:- ...
html绝对定位向下,HTML中三种定位relative,absolute,fixed使用后出现的一些问题
1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图: 以盒子中心为基准,为每条边的正方向,例: 向右移动20px : 代码为left:20px;或者right:- ...
【CSS3】CSS中的定位
一.css定位 CSS position 属性值: absolute:生成绝对定位的元素,脱离文档流,相对于 static 定位以外的第一个父元素进行定位.元素的位置通过 "left&quo ...

CSS 中的定位：relative,absolute

CSS 中的定位：relative,absolute相关推荐

最新文章

热门文章