Vue进阶(幺肆叁):如何用绝对定位(position:absolute)完美定位布局及其注意事项
文章目录
- 一、前言
- 二、标准流
- 2.1 排布规则
- 三、Demo
- 四、拓展阅读
一、前言
在《Vue进阶(幺肆贰):CSS-静态定位,相对定位,绝对定位,固定定位的用法和区别详解》一文中,讲解了CSS
常用的几种定位方式。此博文主要讲解如何应用绝对定位实现完美布局,及应用注意事项。
在布局过程中我们经常用到绝对定位,很多初学者在一开始用绝对定位经常会达不到预期的效果,因为它们往往会忽略使用绝对定位的两个条件。
什么?使用绝对定位还要条件?
当然要啦!代码又没有脑子,没法自己思考应该定位到哪里。为了使用的时候方便,使用绝对定位的时候要满足两个条件。
在讲这两个条件的之前,我们要先提一个概念——标准流。
二、标准流
什么是标准流呢?
标准流(normal flow
),也被称为文档流,是指在不借助任何特殊的css
排列规则元素。
2.1 排布规则
浮动和定位(absolute
,fixed
)会脱离标准流,也就是不受这套规则的约束。
标准流其实就是一个默认的排布规则。下面介绍一下标准流元素的一些排布规则:
- 标准流中的块级元素(
block
)
- 块级元素独占一行,垂直方向上从上往下进行排列;
- 块级元素可设宽高;
- 块级元素不设宽度的情况下,默认宽度为其父级的100%;
- 标准流中的行内元素(
inline
)
- 行内元素将与其他行内元素从左到右进行排列;
- 行内元素不可设置宽高,由其内容决定其宽高;
- 特殊的行内元素
input
与img
是行内元素,但是可以设置宽高;
- 标准流中的嵌套规则
- 块级元素可以嵌套行内元素,反之不能
ul
(无序列表),ol
(有序列表)只能嵌套li
,li
可以嵌套任何元素。dl
(定义列表)只能嵌套dt
(标题),dd
(标题解释)元素。textarea
里只能嵌套文本;p
,h1~h6
只能嵌套文本和行内元素;select
(表单控件)只能嵌套option
;a
标签不可以嵌套交互型的标签;
- 外边距合并问题
标准流中上下相邻两个元素的
margin-bottom
与margin-top
会发生重叠情况。
看了上面的一些排布规则,大家是不是就了解什么叫标准流啦?
举个例子,就拿float
来说,没有浮动的盒子是一个标准流,而浮动的盒子是一个非标准流 ,因为float
更改了它默认的排布规则。
而我们要用到的绝对定位,则是对离自己最近的那个非标准流盒子而言的。 (对一个盒子使用了浮动,相对定位,或者绝对定位,那么这个盒子就变成了一个非标准流的盒子。)
好了,接下来就该讲使用绝对定位要满足的两个条件了。
当我们要使用绝对定位的时候,必须要有两个条件:
- 必须给父元素加定位属性,一般建议使用
position:relative
(即:将父元素设置为相对定位);- 给子元素,加绝对定位
position:absolute
(将子元素设置为绝对定位); 同时加方向属性(top,left,right,bottom
)
为什么要满足这两个条件呢?
因为绝对定位是以父元素为基准点,进行定位。如果他没有父元素,或者它的父元素没有设置position:relative
属性它就会以最近的非标准流盒子为基准点进行定位。
绝对定位会使当前元素脱离文档流,即变成了非标准流。这是什么意思呢?
其实,当它为标准流的时候,它默认在原位,当它脱离标准流的时候,他就浮动起来了,不再占据原来的位置了。
这时候你要是想定位,如果不将它的父元素设置为相对定位(即让父元素变为非标准流),或者它没有父元素,那么它就会以<html>
节点的顶部为基准定位,以它为基准定位。
如果我们满足了这两个条件,它就将会以父元素为基准进行绝对定位。
这样定位的话,会省去超多麻烦。
三、Demo
下面来看一下具体例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>h3{position:absolute;left:50px;top:50px;color:#FFF;}.div_test{width:500px;height:200px;background-color:#000; }.div_test2{width:300px;height:100px;float:right;background-color:blue;//position:relative;//相对定位}
</style>
</head><body>
<div class="div_test"> <div class="div_test2"><h3>这是一个绝对定位了的标题</h3></div>
</div>
</body>
</html>
上面的代码定义了一个大div
,其中包含一个小div
,小div
中有一段用了绝对定位的话。按照我们的代码,我们是想要这段文字根据div_test2来定位的,但是运行一下,如图:
可以看到,这段文字根据<html>
节点顶部作为基准定位。这是因为它的父元素没有设置相对定位。
现在给它的父元素设置一下相对定位。
运行结果如下:
四、拓展阅读
- 《Vue进阶(幺肆贰):CSS-静态定位,相对定位,绝对定位,固定定位的用法和区别详解》
Vue进阶(幺肆叁):如何用绝对定位(position:absolute)完美定位布局及其注意事项相关推荐
- 前端——如何用绝对定位(position:absolute)完美定位布局及其注意事项
在布局的过程中我们经常用到绝对定位,很多初学者在一开始用绝对定位经常会达不到预期的效果,因为它们往往会忽略使用绝对定位的两个条件. 什么?使用绝对定位还要条件??? 当然要啦!代码又没有脑子,没法自己 ...
- position属性:绝对定位position: absolute;相对定位 position: relative;固定定位 position: fixed;
position 属性: position常见的定位模式: 定位模式 描述 是否脱离文档流 移动模式 定位偏移属性 static 默认属性 对象遵循常规流 不移动 不移动 relative 相对定位 ...
- CSS 元素的绝对定位 position: absolute 和 position: fixed
当一个元素的 position属性设置为 absolute 或 fixed,它将使用绝对定位.绝对定位的元素将从文档流中完全删除,它原先在正常文档流中所占的空间会关闭,就好像该元素不存在一样,因此不会 ...
- HTML中定位之绝对定位position:absolute;
position: absolute; 盒子发生绝对定位,将脱离原来文本,盖在其他盒子之上,进行定位操作时,将按照某一个 父级进行定位,该父级具有以下特点: 1.position 属性是非static ...
- css深入浅出系列之:绝对定位 position:absolute
css深入浅出系列只是自己在学习css的时候的一些个人见解,有错误的地方,欢迎在评论中指正噢~ 今天主要在以下几个方面来展开: 1.什么是绝对定位 2.如何确定绝对定位元素的定位点 3.absolut ...
- 绝对定位position:absolute,实现居中对齐
<!doctype html> <html> <head> <meta charset="utf-8"> <t ...
- 绝对定位position:absolute;实现居中对齐
源码: <!doctype html> <html> <head><meta charset="utf-8"><title&g ...
- Vue进阶(幺肆玖):template 标签
文章目录 一.HTML5 中的 template 标签 二.Vue 中的 template 标签 三.注意事项 四.拓展阅读 一.HTML5 中的 template 标签 html5中template ...
- Vue进阶(幺陆叁):vue项目启动后自动打开页面并设置默认浏览器
文章目录 一.修改默认浏览器 二.vue 项目启动自动打开页面 三.拓展阅读 以windows 系统为例,操作方法如下: 一.修改默认浏览器 设置谷歌浏览器为默认浏览器. 1.首先打开"开始 ...
最新文章
- CVPR 2018 | 腾讯AI Lab入选21篇论文详解
- raid5和raid6对比
- 在类模板的声明和定义中把.h与.cpp分离
- r语言 adf检验_r语言中如何进行两组独立样本秩和检验
- 解决问题:Couldn't open file: data/coco.names
- python怎么写出来的_如何写出优雅又地道的Python代码?【转载】
- windows常用指令
- Dev的多语言简单实现
- 移动国家号(MCC)
- js var是什么类型_面试官问你JS基本类型时他想知道什么?
- 【CVE-2016-10009】OpenSSH 7.4 - agent Protocol Arbitrary Library Loading
- 经验模态分解(EMD)
- java foreach循环语句_Javaforeach语句
- RB-tree深度探索
- 模拟电子技术基础笔记(4)——晶体三极管
- Python应用与实践
- RFID环卫车辆管理系统应用方案
- 【智能算法】GRNN的数据预测—基于广义回归神经网络的货运量预测
- 蔚来港股上市:李斌从至暗时刻到迎来辉煌 又面临掉队质疑
- 内存不足的原因及解决方法
热门文章
- getBean(String)和getBean(Class<T>)的区别
- Manjaro安装Mysql8.0(血泪篇)
- 第二次作业 软件案例分析
- 【编译原理】方舟编译技术课程 — 词法分析
- @WebServlet需要引入的依赖包
- 中国网络水军调查新闻
- CentOS8搭建SonarQube9+SonarScanner+Postgresql+bitbucket+cppcheck 扫描C语言。(未完待续)
- Android 齐刘海适配
- 【NJUSE操作系统】1. 计算机操作系统概述
- 网页端实现一键打印功能,H5,热敏打印机,普通打印机