CSS absolute、fixed、relative、static等定位笔记

1、伪类

是用来添加一些选择器的特殊效果。

选择器:伪类 {}

<style>
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>

2、元素的相对位置 - 盒模型

块级元素自动从新的一行开始（比如标题、段落以及 div），

行内元素排列在上一个元素后（比如图片以及 span），默认不会新起一行。

元素默认按照这种方式布局称为文档的 普通流，同时 CSS 提供了 position 属性来覆盖它。

CSS 使用 position 属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。会`将元素从当前的文档流里面移除，周围的元素会忽略它`。 `absolute` 定位比较特殊的一点是元素的定位参照于最近的`已定位祖先元素`。如果它的父元素没有添加定位规则（默认是 `position:relative;`）,浏览器会继续寻找直到默认的 body 标签。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。是一种特殊的绝对（absolute）定位，区别是其参照物是浏览器窗口。并且会将元素从当前的文档流里面移除，其它元素会忽略它的存在。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。注意: `fixed` 定位和 `absolute` 定位的最明显的区别是 `fixed` 定位元素不会随着屏幕滚动而移动。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky	粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
inherit	规定应该从父元素继承 position 属性的值。
initial	设置该属性为默认值

2.1 绝对定位 absolute

2.2 相对定位 relative

<style>h2.pos_left {position: relative;left: -50px;}h2.pos_right {position: relative;left: 50px;}
</style><body><h2>这是位于正常位置的标题</h2><h2 class="pos_left">这个标题相对于其正常位置向左移动</h2><h2 class="pos_right">这个标题相对于其正常位置向右移动</h2><p>相对定位会按照元素的原始位置对该元素进行移动。</p><p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p><p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

2.3 固定定位 fixed

<style>h1 {margin-top: 30px;}#navbar {position: fixed;top:0px;left: 0px;width: 100%;background-color: #767676;}nav ul {margin: 0px;padding: 5px 0px 5px 30px;}nav li {display: inline;margin-right: 20px;}a {text-decoration: none;}
</style>
<body><header><h1>欢迎!</h1><nav id="navbar"><ul><li><a href="/">网站首页</a></li><li><a href="/about/about.html">联系我们</a></li></ul></nav></header><p>当导航条固定在浏览器窗口上时，我会上移。</p><p><h2>长恨歌</h2>汉皇重色思倾国，御宇多年求不得。<br>杨家有女初长成，养在深闺人未识。<br>天生丽质难自弃，一朝选在君王侧。<br>回眸一笑百媚生，六宫粉黛无颜色。<br>春寒赐浴华清池，温泉水滑洗凝脂。<br>侍儿扶起娇无力，始是新承恩泽时。<br>云鬓花颜金步摇，芙蓉帐暖度春宵。<br>春宵苦短日高起，从此君王不早朝。<br>承欢侍宴无闲暇，春从春游夜专夜。<br>后宫佳丽三千人，三千宠爱在一身。<br>金屋妆成娇侍夜，玉楼宴罢醉和春。<br>姊妹弟兄皆列土，可怜光彩生门户。<br>遂令天下父母心，不重生男重生女。<br>骊宫高处入青云，仙乐风飘处处闻。<br>缓歌慢舞凝丝竹，尽日君王看不足。<br><br>渔阳鼙鼓动地来，惊破《霓裳羽衣曲》。<br>九重城阙烟尘生，千乘万骑西南行。<br>翠华摇摇行复止，西出都门百余里。<br>六军不发无奈何，宛转娥眉马前死。<br>花钿委地无人收，翠翘金雀玉搔头。<br>君王掩面救不得，回看血泪相和流。<br>黄埃散漫风萧索，云栈萦纡登剑阁。<br>峨嵋山下少人行，旌旗无光日色薄。<br>蜀江水碧蜀山青，圣主朝朝暮暮情。<br>行宫见月伤心色，夜雨闻铃肠断声。<br>天旋日转回龙驭，到此踌躇不能去。<br>马嵬坡下泥土中，不见玉颜空死处。<br>君臣相顾尽沾衣，东望都门信马归。<br>归来池苑皆依旧，太液芙蓉未央柳。<br>芙蓉如面柳如眉，对此如何不泪垂？<br>春风桃李花开夜，秋雨梧桐叶落时。<br>西宫南内多秋草，落叶满阶红不扫。<br>梨园弟子白发新，椒房阿监青娥老。<br>夕殿萤飞思悄然，孤灯挑尽未成眠。<br>迟迟钟鼓初长夜，耿耿星河欲曙天。<br>鸳鸯瓦冷霜华重，翡翠衾寒谁与共？<br>悠悠生死别经年，魂魄不曾来入梦。<br><br>临邛道士鸿都客，能以精诚致魂魄。<br>为感君王辗转思，遂教方士殷勤觅。<br>排空驭气奔如电，升天入地求之遍。<br>上穷碧落下黄泉，两处茫茫皆不见。<br>忽闻海上有仙山，山在虚无缥缈间。<br>楼阁玲珑五云起，其中绰约多仙子。<br>中有一人字太真，雪肤花貌参差是。<br>金阙西厢叩玉扃，转教小玉报双成。<br>闻道汉家天子使，九华帐里梦魂惊。<br>揽衣推枕起徘徊，珠箔银屏迤逦开。<br>云鬓半偏新睡觉，花冠不整下堂来。<br></p>
</body>

CSS absolute、fixed、relative、static等定位笔记相关推荐

CSS的定位 position属性的 absolute relative static fixed的区别及用法
CSS中position一般是跟盒子结合做出效果的,浮动可以实现盒子在横向上的排列,但是如何实现在盒子上重叠另一个盒子的效果呢?就需要CSS的position来实现 position属性有四个,分别有 ...
CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
css中position属性（absolute/relative/static/fixed）
css中position属性(absolute/relative/static/fixed): position:static 无特殊定位,是html元素默认的定位方式,对象遵循正常文档流.top ...
HTML之position:absolute relative static fixed的区别和理解
HTML之position:absolute relative static fixed的区别在理解position:absolute relative static fixed的区别时,我们先需要 ...
Position属性四个值：static、fixed、absolute和relative的区别和用法
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...
CSS中position属性(relative,absolute,fixed)和display中的inline-block
前言平时很少写CSS,用的多也就是Bootstrap来堆样式,写起来快一点,但是有时候需要自己写,很久没写容易忘记,这里记录下这两个常用属性position和display 这里贴一条CSDN设置图 ...
[css] position的relative和absolute定位原点是哪里？
[css] position的relative和absolute定位原点是哪里? absolute: 定位原点为第一个position不为static的父级元素的左上角. 可以基于该特性实现heigh ...
html div相对位置,CSS 相对|绝对(relative/absolute)定位系列（一）
1.绝对定位和浮动元素是近亲:都具备包裹性和破坏性包裹性:包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100 ...
CSS 相对/绝对(relative/absolute)定位系列（二）
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1330 一.常 ...

CSS absolute、fixed、relative、static等定位笔记

CSS absolute、fixed、relative、static等定位笔记相关推荐

最新文章

热门文章

CSS absolute、fixed、relative、static等定位 笔记

CSS absolute、fixed、relative、static等定位 笔记相关推荐

最新文章

热门文章

CSS absolute、fixed、relative、static等定位笔记

CSS absolute、fixed、relative、static等定位笔记相关推荐