关于CSS中关于定位的总结

CSS中定位有四种在不同的场景下有不同的作用下面我就大体的介绍一下这四种定位.

static静态定位:应用的场景不多,这里不做介绍
下面主要介绍一下其他三种常见的定位

1.position:relative相对定位:顾名思义,相对定位就是相对于原来自己的位置做出对应的变化, 需要注意的是 :元素移动后会占有原来的位置(这是relative定位最为重要的一点)
下面为代码演示部分:

<style>* {margin: 0;padding: 0;/* 这里清除掉所有外边距和内边距,没有实质意义,只是方便观察 */}.pink {width: 80px;height: 80px;background-color: pink;}.purple {width: 80px;height: 80px;background-color: purple;}.green {width: 80px;height: 80px;background-color: greenyellow}</style>

这里定义了三个div并给了相应的颜色,运行结果如下

当给子盒子如下定位属性时

 .purple {position: relative;top: 0;left: 80px;/* 上面给这个盒子添加了相对定位,并让它相对原来的自己移动了80px的距离 */width: 80px;height: 80px;background-color: purple;}

页面变成了这样,这也验证了最重要的一点—元素移动后会占有原来的位置
否则绿色的盒子就会顶上去

2.ponsition:absolute绝对定位:绝对定位是以自己父级元素做出的位置改变,如果父级元素有position属性,以父级元素为基准做出相应的移动,如果父级元素没有position属性(或者没有父级元素),以浏览器为基准做出相应的移动. 需要注意的是 :元素移动后不会占有原来的位置.
下面为代码演示

.purple {position: absolute;top: 160;left: 80px;/* 这里的紫色盒子没有父级元素所以是以浏览器为基准的定位 */width: 80px;height: 80px;background-color: purple;}

显然绿色盒子顶了上去,这个结果就验证了绝对定位:元素移动后不会占有原来的位置.

3.fixed固定定位:固定定位的位置是相对于整个页面的位置,与是否有父级元素无关,同样,固定定位也不会保留位置

关于CSS中关于定位的总结相关推荐

CSS中Position定位属性的使用
文章目录 CSS中定位属性的使用 position:absolute position:relative position:fixed position:sticky position:static ...
php css定位到图片上,CSS_浅谈css中图片定位之所有图标放在一张图上，如今做网页为了使网站丰富多 - phpStudy...
浅谈css中图片定位之所有图标放在一张图上如今做网页为了使网站丰富多彩,富于表现力,往往需要应用大量的图片/图标.如何处理这些图片,使其尽量不影响网页载入,解析等速度,是一个不大不小的问题.如果你的 ...
CSS中固定定位、相对定位、绝对定位以及flex布局高效定位
CSS中固定定位.相对定位.绝对定位以及flex布局高效定位一.固定布局将元素固定到一个位置,不管屏幕怎样移动,元素的位置不移动. <style>body {height: 3000p ...
总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
简要描述CSS 中的定位机制。
CSS中,除了默认的流定位方式以外,还有如下几种定位机制:浮动定位.相对定位.绝对定位和固定定位. 浮动定位是指将元素排除在普通流之外,并且将它放置在包含框的左边或者右边,但是依旧位于包含框之内. 相 ...
css中四大定位模式
目录一.静态定位:static 二.相对定位:relative 三.绝对定位:absolute 四.固定定位:fixed 五.定位要点--子绝父相在CSS中,通过position属性定义元素的定位 ...
【CSS3】CSS中的定位
一.css定位 CSS position 属性值: absolute:生成绝对定位的元素,脱离文档流,相对于 static 定位以外的第一个父元素进行定位.元素的位置通过 "left&quo ...
CSS中的定位——position属性
CSS定位指的是改变元素在页面中的位置. CSS定位机制: 普通流:元素按照其在HTML中的位置顺序决定排布的过程(也就是我不对元素进行定位的默认排布) 浮动绝对布局 CSS定位包含的属性有: 属 ...
CSS中有关定位的知识总结
定位:把目标元素放在页面中的任意位置格式: 选择器 { position: 属性值; } 三种定位类型:相对定位绝对定位固定定位相对定位:相对于其原文档流的位置进行定位 position:re ...

关于CSS中关于定位的总结

关于CSS中关于定位的总结相关推荐

最新文章

热门文章