CSS定位总结：position=static/relative/absolute/fixed时的区别、top/bottom/left/right与margin外边距的运用

准备布局：

<!DOCTYPE html>
<html>
<head>
<style>
*{ margin:0; padding:0; }
.base-container{width: 500px;height: 500px;background-color:lightgray;border:1px dashed red;
}
.base-compare {width:200px;height:100px;background-color:yellow;border:1px solid purple;
}
.base-parent {width:300px;height:230px;background-color:green;
}
.base-child {width:200px; // 宽高同.base-compareheight:100px;background-color:cyan;border:1px solid purple;
}
</style>
</head>
<body>
<div class="base-container"><!--测试容器--><div class="base-compare">我是参考div</div><div class="base-parent parent"><!--父级div--><div class="base-child child">我是子级div</div></div>
</div>
</body>
</html>

（1）父级为relative，子级为absolute时：

.parent{
position:relative;
}
.child{
position:absolute;
top:30px; // 如果是百分比%，则相对于父容器的高度的百分比
left:20px;
// margin-top:30px; // 非%为单位时，等效，效果叠加；%为单位时，不等效！
// margin-left:20px; // 同上
}

（2）父级为static，子级为absolute时：

.parent{
position:static;
}
.child{
position:absolute;
top:50px; // 50%; （单位为%和非%）都是相对于最近的relative容器而言
margin-left: 50%; // 同上
}

（3）父级为fixed，子级为absolute时：

.parent{
position:fixed;
}
.child{
position:absolute;
top:100%; // 相对于父容器的高度百分比
right:10px; // 相对于父容器的右边
}

CSS定位总结：position=static/relative/absolute/fixed时的区别、top/bottom/left/right与margin外边距的运用相关推荐

CSS中position属性(relative,absolute,fixed)和display中的inline-block
前言平时很少写CSS,用的多也就是Bootstrap来堆样式,写起来快一点,但是有时候需要自己写,很久没写容易忘记,这里记录下这两个常用属性position和display 这里贴一条CSDN设置图 ...
html相对位置置顶,css定位（position）属性怎么用？
在CSS中,定位(position)属性用于规定元素的定位类型,定义建立元素布局所用的定位机制.下面给大家介绍一下position属性,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
html本文框百分比定位,HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点...
1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图: 以盒子中心为基准,为每条边的正方向,例: 向右移动20px : 代码为left:20px;或者right:- ...
CSS Margin(外边距)
CSS Margin(外边距)属性定义元素周围的空间. Margin margin清除周围的元素(外边框)的区域.margin没有背景颜色,是完全透明的 margin可以单独改变元素的上,下,左,右边 ...
CSS 轮廓（outline）/CSS margin(外边距)/CSS padding（填充）
所有CSS 轮廓(outline)属性 CSS margin(外边距) margin margin 清除周围的(外边框)元素区域.margin 没有背景颜色,是完全透明的. margin 可以单独改变 ...
CSS 浅析position：relative/absolute定位方式
一.position:relative 相对定位分两种情况分析: · 无 position: relative: · 有 position: relative. 代码如下图: 显示效果如下图: 我们 ...
htm——position:static、absolute、relative详解
前言接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是 ...
CSS定位（position））之sticky 定位
sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位. position: sticky; 基于用户的滚动位置来定位. 粘性定位的元素是依赖于用户的滚动,在 position:relati ...
教你玩转CSS margin(外边距)
目录 margin 可能的值 Margin - 单边外边距属性 Margin - 简写属性所有的CSS边距属性 margin margin 清除周围的(外边框)元素区域.margin 没有背景颜色, ...

CSS定位总结：position=static/relative/absolute/fixed时的区别、top/bottom/left/right与margin外边距的运用

CSS定位总结：position=static/relative/absolute/fixed时的区别、top/bottom/left/right与margin外边距的运用相关推荐

最新文章

热门文章