CSS中的四种定位以及top和margin-top的区别
CSS中一共有四种定位分别是默认,相对,绝对,固定
1,position:static,这种定位是默认的,一般没什么实际的作用。
2,position:relative,相对定位 ,不会脱离文档流,类似于static,按顺序排列,一般设置也不会有什么变化,可以通过margin-top/right/bottom/left来改变框的位置
3,position:absolute,绝对定位,这种定位脱离文档流,可以理解为跟其他的元素不再一个次元中,可以用top/right/bottom/left来控制位置,absolute是相对于最近祖先非static定位来定位的,如果说他的父级定位是默认的,那么他就会继续向上找父级的父级,直到找到非static定位为基准点,比如在下面的代码中
<!DOCTYPE html>
<html>
<head><!-- 规定字符集的编码为utf-8 --><meta charset="utf-8"><style type="text/css">.div1{position: relative;width: 400px;height: 400px;border:2px solid red;margin:50px;}.div2{width: 200px;height: 200px;margin:50px;border:2px solid pink;}.div3{position: absolute;top: 0px;left: 0px;width: 100px;height: 100px;border:2px solid purple;}</style>
</head>
<body><div class="div1"><div class="div2"><div class="div3"></div></div></div>
</body>
</html>
结果如下:
图中的黑色边框的就是div3,我们可以看到top:0之后的位置在div1的左上角,但是div1是他父级的父级,但是我们要是给div2设置了position:relative之后会是怎样的结果呢?
我们可以看到div3现在定位到了div2的左上角,可见absolute在div2是relative定位之后起到了这样的作用,可以尝试一下,非父级是其他的两个定位之后的结果。
4,position:fixed,固定定位,脱离文档流,这种定位是相对与浏览器的窗口来定位,我们经常会看到网页中右下角有个回顶部的标记,无论鼠标滑轮怎么滑动他都不会改变他的位置。
以上是我们的4种定位,下来说一点相关的的东西,我们经常会用到position:absolute,他是脱离文档流的不会对文档中的其他布局产生影响,absolute定位下的float:left/right是不起作用的,通常我们会在absolute下用top/right/bottom/left来改变他的位置,很多人认为只有绝对定位下top/right/bottom/left才起作用,其实不然,relative定位之下这几个属性也是可以使用的,在这种情况下这几个属性和margin-top/right/bottom/left的作用是类似的,都可以来改变盒子的位置,那么在relative定位下top和margin-top有什么关系呢?
我们在上面的代码下去掉原来的div3,新加一个盒子div4并且这个盒子和div2是兄弟关系,div2和div4都使用position:relative,代码如下
<!DOCTYPE html>
<html>
<head><!-- 规定字符集的编码为utf-8 --><meta charset="utf-8"><style type="text/css">.div1{position: relative;width: 400px;height: 400px;border:2px solid red;margin:50px;}.div2{width: 200px;height: 200px;position: relative;margin-left: 100px;border:2px solid pink;}.div4{position: relative;width: 100px;height: 100px;border:2px solid black;margin-left:100px;}</style>
</head>
<body>
<div class="div1"><div class="div2"></div><div class="div4"></div>
</div>
</body>
</html>
图中的黑色边框的是div4,他的上边框现在距离是0,下来给他设置,margin-top:50px或者top:50px都会使div4向下移动50px,同时设置后向下移动100px,如果只设置margin-top:50px后,我们按F12进入开发者环境中可以看到这样的结果
也就是说设置margin-top后这个50px属于盒子模型中的一部分,但是如果我们设置了top:50px后会出现这样的结果
我们可以看到这个50px不属于盒子模型的一部分,他只是用定位来位移了一部分位置,这也就是relative定位下它俩的区别,并且top/right/bottom/left在relative下也可以使用,但是在默认定位下是不起作用的。
CSS中的四种定位以及top和margin-top的区别相关推荐
- CSS中的四种定位方式
在CSS中定位有以下4种: 静态定位 - static 相对定位 - relative 绝对定位 - absolute 固定定位 - fixed 静态定位 - static 静态定位是css中的默认定 ...
- CSS中的四种样式及选择器
CSS语法 选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素. 属性:属性是指定选择符所具有的属性,它是css的核心,css2共有150多个属性 属性值:属性值包括法定属 ...
- CSS的四种定位方式
CSS的四种定位方式 1.静态定位: 设置方式为position: static;静态定位的盒子是标准流状态,用于取消定位.静态定位的盒子处于网页的最底层,并且top.left.bottom.righ ...
- css四种定位详细讲解
在前端开发中,最重要的莫过于盒子的使用,在盒子中最常用的就是使用定位进行对盒子的位置的调整,这里我简单的介绍下这四种定位方式: 1.static:静态定位也是默认的定位方式,该定位是不脱标的定位方式, ...
- css中的三种基本定位机制
css中的三种基本定位机制 a.普通文档流 b.定位:相对定位 绝对定位 固定定位 c.浮动 1.普通流中,元素位置由文档顺序和元素性质决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直mar ...
- CSS常见的四种垂直居中的方法
面试中不管是笔试题还是面试题,一般很容易被问到如何实现垂直水平居中,这里总结四种方法作为参考 (1)margin:auto法 css: div{ width: 400px; height: 400px ...
- 定位的简介和四种定位
目录 一.定位的简介 二.四种定位 Ⅰ 相对定位 Ⅱ 绝对定位 Ⅲ 固定定位 Ⅳ 粘滞定位 一.定位的简介 定位(position) 定位时一种更加高级的布局手段 通过定位可以将元素摆放到页面的任意位 ...
- html图片定位代码怎么写,如何在css中设置插入图片定位
在做网页开发时,客户给的素材图片通常都是连在一起的,这样做也是为了缩短响应时间.下面就给大家具体说一下 ,如何通过css属性来定位图片. 如何在css中设置插入图片定位 首先设置固定图片的css属性是 ...
- html如何引入css文件?HTML引入外部css文件的四种方法
在学习前端的时候,我们应该知道css给html标记添加各种样式,用来告诉浏览器,因该如何显示这些标记里面的内容.既然css是用来给html添加各种样式的,那么,html中如何引入外部的css文呢?本篇 ...
- html怎么写入图片位置,如何在css中设置插入图片定位
在做网页开发时,客户给的素材图片通常都是连在一起的,这样做也是为了缩短响应时间.下面就给大家具体说一下 ,如何通过css属性来定位图片. 如何在css中设置插入图片定位 首先设置固定图片的css属性是 ...
最新文章
- 【原】iOS学习之Xcode8关于控制台不打印错误信息
- 图像处理特征不变算子系列之KLT算子
- shell在二级python_在Shell脚本中检查Python版本的方法
- [译]WPF 应用程序和MVVM设计模式 ——Josh Smith
- 前端生产方式:过去 10 年回顾和未来 10 年展望
- BugkuCTF-MISC题做个游戏
- [转载] Python3 使用 SQLite3 数据库的操作笔记:批量插入
- BGP多出口多宿主实验
- 中建股份400亿大型IPO获“特批”
- 第九周项目6-穷举法之换分币
- 计算机一级考试wps教程视频教程,全国计算机等级考试一级WPS Office教程(2008年版)...
- Proxomitron之天涯只看规则
- mysql语句中单引号、双引号、反引号用法与区别
- 构造图片木马,绕过文件内容检测上传木马
- FTP服务报错227解决办法
- 1006 换个格式输出整数
- putty登录树莓派4超时
- linux 原型软件,7款免费原型设计工具,总有一款是你的菜!
- 低功耗蓝牙开发技术概述(三)——主机
- 用vscode写markdown的正确姿势