postion absolution relative fixed static 使用

遵循正常文档(占空间)

static 默认值，trbl无效
relative. trbl有效，相对自己正常的位置的偏移，比如 top:10px 移动后顶部的位置与移动前顶部的位置差10px。也就是向下移动10px

脱离正常文档（不占空间）

absolute trbl 有效, 相对于 static 定位以外的第一个父元素进行定位（意思是，找父节点，找到第一个非static定位的，如果一直向上找不到，那么就是body）. 如果没有设定 t r b l 的话.那么就相对于父元素.
fixed trbl 有效. 但是是针对浏览器窗口的. 随着浏览器的变化而变化. 但是不随滚动条的变化而变化. 最常用的是固定页面的head部分. 就像excel中的冻结首行首列.

常用 relative 在外层内层用 absolute 来配合使用.就不用使用浮动来解决问题了.（可以出现删除的小红点，可以在原始图片上增加按钮等）

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">.static {background-color: red;left: 90px;//无效}.relative {background-color: orange;top: 100px;left: 90px;position: relative;}.absolute {background-color: green;top: 100px;position: absolute;}.absolute2 {background-color: green;top: 300px;position: absolute;}.fixed {background-color: blue;top: 50px;right: 50px;left: 50px;position: fixed;}</style></head><body><div class="static">div postion default static</div><div class="relative">div postion relative</div><div class="absolute">div postion absolute</div><div class="fixed">div postion fixed</div><div class="absolute2">out absolute<div class="relative">inner relative</div></div><div class="relative">out relative<div class="absolute">inner absolute</div></div></body>
</html>

postion absolution relative fixed static 使用相关推荐

Position(Static, Absolute, Relative, Fixed)
Static : 正常页面流(结点)流 Relative : 相对于自己,在Static结点的上面(z-index) Absolute : 相对于第一个非Static父结点,不属于页面流(结点流)(不 ...
CSS+DIV定位分析(relative,absolute,static,fixed)
各个属性值的定义: 1.static:默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.relative:生成相对定位 ...
relative布局html,CSS的四种布局方式static/relative/fixed/absolute
static static布局是HTML元素默认的布局方式,并且static布局的元素不会受到top/left/bottom/right属性的影响.布局元素的位置即其在标准文档流中的位置. relat ...
CSS absolute、fixed、relative、static等定位笔记
1.伪类是用来添加一些选择器的特殊效果. 选择器:伪类 {} <style> a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#0 ...
CSS之定位布局（position，relative定位布局技巧）
文章目录 1.什么是定位: 2.各个属性值的描述: 3.各个属性值的具体作用: 4.定位布局技巧:position:relative 与 position:absolute 结合使用: 1.什么是定位 ...
CSS中的Position属性
1.简介 position有五个属性: static | relative | absolute | fixed | inherit static 和 inherit : 没什么值得介绍的. r ...
前端计划——面试题总结-CSS篇
前端面试之CSS篇 1.三种基本引入方式外部样式表 <link rel="stylesheet" type="text/css" href=" ...
flex布局怎么设置子元素大小_Web前端（三）：前端布局
前端布局对前端开发而言是必不可少的环节之一.我所理解的前端布局可以分成两个大类,第一类是元素层面的布局,就是像absolute布局.flex布局等等,都是描述元素在页面上以何种形式呈现,即局部的布局: ...
03-页面布局[Python]
一.盒子模型盒模型: 是CSS的基石,指定标签如何显示.它规定了网页元素如何显示以及元素间相互关系. 页面上的每个元素都被当成一个矩形盒子.占据一定的页面控件,这个盒子由内容(content).内边 ...

postion absolution relative fixed static 使用

遵循正常文档(占空间)

脱离正常文档（不占空间）

postion absolution relative fixed static 使用相关推荐

最新文章

热门文章