css position relative absolute fixed

relative相对定位

将定位元素偏离正常文档流，但占用正常文档流的位置。如下图中：

1.relative相对定位是相对于自身的定位，relative元素不加position定位，位置是在虚框位置。

relative元素加了position: relative;将根据top/bottom/left/right,基于虚框的margin左上外角定位的。

2.虚框为relative元素占用的正常文档流的位置，所以正常元素到下面了。

<style>* {padding: 0;margin: 0;}#sub1 {height: 100px;width: 100px;position: relative;top: 100px;left: 100px;background-color: red;}#sub2 {height: 100px;width: 100px;
            background-color: green;}</style><body style="border:1px black solid"><div id="sub1">relative元素</div><div id="sub2">正常元素</div>
</body>

absolute绝对定位

将定位元素偏离正常文档流，不占用正常文档流的位置。如下图中：

  <style>* {padding: 0;margin: 0;}#sub1 {height: 100px;width: 100px;position: absolute;/* margin: 10px;border: 10px;padding: 10px; */top: 100px;left: 100px;background-color: red;}#sub2 {height: 100px;width: 100px;/* position: relative;top: 100px;left: 100px; */background-color: green;}</style>
<body style="border:1px black solid"><div id="sub1">absolute元素</div><div id="sub2">正常元素</div>
</body>

1.absolute元素的父元素没有position定位，absolute元素相对于body定位

<style>* {padding: 0;margin: 0;}#parent {height: 100px;width: 100px;background-color: yellow;/* position: absolute; */margin: 100px;padding: 100px;}#child {height: 100px;width: 100px;position: absolute;/* margin: 10px;border: 10px;padding: 10px; */top: 100px;left: 100px;background-color: red;}</style>
<body style="border:1px black solid"><div id="parent">父元素<div id="child">absolute元素</div></div>
</body>

2.absolute元素的父元素有position定位（absolute或relative），absolute元素相对于父元素的padding左上外角进行定位

 <style>* {padding: 0;margin: 0;}#parent {height: 100px;width: 100px;background-color: yellow;position: absolute;margin: 100px;padding: 100px;}#child {height: 100px;width: 100px;position: absolute;/*或者positi:relative*//* margin: 10px;border: 10px;padding: 10px; */top: 100px;left: 100px;background-color: red;}</style>
<body style="border:1px black solid"><div id="parent">父元素<div id="child">absolute元素</div></div>
</body>

fixed固定定位

脱离文档流，不占用正常文档流，相对于body定位

转载于:https://www.cnblogs.com/chrisghb8812/p/9909668.html

css position relative absolute fixed相关推荐

html中的绝对定位怎么写,CSS position绝对定位absolute relative
DIV CSS position绝对定位absolute relative教程篇常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...
html本文框百分比定位,HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点...
1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图: 以盒子中心为基准,为每条边的正方向,例: 向右移动20px : 代码为left:20px;或者right:- ...
CSS中position属性(relative,absolute,fixed)和display中的inline-block
前言平时很少写CSS,用的多也就是Bootstrap来堆样式,写起来快一点,但是有时候需要自己写,很久没写容易忘记,这里记录下这两个常用属性position和display 这里贴一条CSDN设置图 ...
CSS定位总结：position=static/relative/absolute/fixed时的区别、top/bottom/left/right与margin外边距的运用
准备布局: <!DOCTYPE html> <html> <head> <style> *{ margin:0; padding:0; } .base- ...
CSS position属性absolute relative等五个值的解释
目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE浏览器,IE9.IE10还没测试 ...
CSS position绝对定位absolute relative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...
CSS:position:relative;的认识
CSS定位的原理把浏览器窗口想象成一个坐标系统: CSS定位的原理是:你可以将任何盒子(box)放置在坐标系统的任何位置上. 采用CSS定位技术来放置元素是非常精确的.相对于使用表格.透明图像或其他 ...
HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点
1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图: 以盒子中心为基准,为每条边的正方向,例: 向右移动20px : 代码为left:20px;或者right:- ...
html绝对定位向下,HTML中三种定位relative,absolute,fixed使用后出现的一些问题
1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图: 以盒子中心为基准,为每条边的正方向,例: 向右移动20px : 代码为left:20px;或者right:- ...
CSS的定位 position属性的 absolute relative static fixed的区别及用法
CSS中position一般是跟盒子结合做出效果的,浮动可以实现盒子在横向上的排列,但是如何实现在盒子上重叠另一个盒子的效果呢?就需要CSS的position来实现 position属性有四个,分别有 ...

css position relative absolute fixed

css position relative absolute fixed相关推荐

最新文章

热门文章