CSS 小结笔记之定位
定位也是Css中一个非常强大的属性。定位主要是用来移动盒子，将其移动到我们想要的位置。
定位分为两部分
1、边偏移 left | right |top |bottom：偏移大小；（边偏移一般制定上就不指定下，指定左就不指定右）
2、定位模式 position :static| relative |absolute | fixed
（1）position :static默认值，使用static时 边偏移不起效果。常用于取消定位。
（2）position :relative 相对定位，相对于其原文档流的位置进行定位 可以通过边偏移移动位置，但是原来位置继续占有 每次移动以自己的左上角为基点进行移动
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* */ .son1 {
width: 100px;
height: 100px;
background-color: red;
} .son2 {
width: 100px;
height: 100px;
background-color: pink;
position: relative;
left: 90px;
top: 50px;
} .son3 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head> <body>
<div class="fa">
<div class="son1">
</div>
<div class="son2">
</div>
<div class="son3">
</div>
</div>
</body> </html>
显示结果为：
（3）position :absolute 绝对定位，相对于上一个已经定位的父元素进行定位 脱离标准流，与浮动类似完全不占位置
a、如果父亲没有定位，则以浏览器为准对齐，原位置不保留
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* */ .fa {
width: 400px;
height: 400px;
background-color: aqua;
margin: 0 auto;
} .son1 {
width: 100px;
height: 100px;
background-color: red;
} .son2 {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 90px;
top: 50px;
} .son3 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head> <body>
<div class="fa">
<div class="son1">
</div>
<div class="son2">
</div>
<div class="son3">
</div>
</div>
</body> </html>
b、父亲有定位，则以最近的父亲元素为基准点对齐 （父亲可以是absolute也可以是relative） 一半来说子元素绝对定位，父元素相对定位即“子绝父相”
在上例中给.fa 样式增加 一个相对定位 即position: relative; 截个图变为：
c、绝对定位 想要水平垂直居中，则先设置left50% 再设置自身宽度的一半 margin-left：-50px
.son2 {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
}
将a中.son的样式改为如上所示代码，可以将.son2 改为水平居中，垂直居中，结果图如下
（4）position :fixed 固定定位 相对于浏览器窗口进行定位,与父元素没有任何关系 。不占位置，不随滚动条滚动， 固定定位一定要写宽和高（除非有内容撑开盒子） 。
其他注意点：
1、在定位中，会产生层叠关系，设置层叠显示顺序使用z-index：1；数字越大优先级越高（只对定位元素（静态定位除外）产生效果）
如下例
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
} div {
width: 200px;
height: 200px;
margin: 0;
} div:first-child {
background-color: aqua;
z-index: 3;
} div:nth-child(2) {
background-color: red;
position: absolute;
left: 10px;
top: 10px;
z-index: 2;
} div:last-child {
background-color: pink;
position: absolute;
left: 20px;
top: 20px;
z-index: 1;
}
</style>
</head> <body>
<div></div>
<div></div>
<div></div>
</body>
在有定位元素中设置z-index 数值高的 显示在最上面。
2、绝对定位和固定定位会将元素转换为行内块元素，因此设置绝对定位和固定定位后就不需要在转换模式了
CSS 小结笔记之定位的更多相关文章
- CSS 小结笔记之解决flex布局边框对不齐
在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE htm ...
- CSS 小结笔记之浮动
在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <h ...
- CSS学习笔记之定位
position 有4中不同类型的定位,分别为static.relative.absolute.fixed 1.static 元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创 ...
- html+css学习笔记 4[定位]
如何让图1中的div2移动到如图2上的位置: 思路:哪些css命令能够影响盒子显示的位置呢? relative相对定位/定位偏移量 position:relative; 相对定位 a ...
- CSS学习笔记：定位属性position
目录 一.定位属性简介 二.各属性值的具体功能 1. relative 2. absolute 3. fixed 三.三种定位属性的效果总结 参考资料:https://www.bilibili.com ...
- CSS 小结笔记之图标字体（IconFont）
本篇主要介绍一种非常好用的图标大法——图标字体(IconFont). 什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标. 网站上经常会用到各种图标,之前 ...
- CSS 小结笔记之em
1.为什么使用em em也是css中的一种单位,和px类似.很多人会疑惑为什么有了px之后还要使用em,而且em使用起来相对于px来讲比较麻烦. em主要是应用于弹性布局,下面给出一个小栗子说明em的 ...
- CSS 小结笔记之BFC
BFC 即为Block formatting context 的缩写,BFC 主要用来将一个盒子设置为一个隔离的容器,不管盒子内部的元素具有什么属性,都不会影响到盒子的外面. 1.哪些元素能产生BFC ...
- CSS 小结笔记之伸缩布局 (flex)
CSS flex 是一种伸缩布局,之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法——flex(弹性布局). flex 为和模型布局提供了极 ...
随机推荐
- 关于冒泡排序的Java代码实现
一.排序算法的历史: 排序算法的发展历史几乎和计算机的发展历史一样悠久,而且直到今天,世界范围内依然有计算机科学家正在研究着排序的算法,由此可见排序算法的强大魅力. 我们现在介绍的排序算法都是前任 ...
- RHCE 学习结构
本文内容为本站的 blog 链接 第一章 安装初体验 第二章 访问系统 2.1 基于图形化界面访问 2.2 基于文本访问 2.3 用户管理 第三章 文件系统 3.1 Linux 文件系统 ...
- (转)十分钟了结MySQL information_schema
十分钟了结MySQL information_schema 原文:http://www.cnblogs.com/shengdimaya/p/6920677.html information_sche ...
- Spring Security构建Rest服务-1200-SpringSecurity OAuth开发APP认证框架
基于服务器Session的认证方式: 前边说的用户名密码登录.短信登录.第三方登录,都是普通的登录,是基于服务器Session保存用户信息的登录方式.登录信息都是存在服务器的session(服务器的一 ...
- 搭建互联网架构学习--005--框架初步拆分ssm单一框架
经过前边的准备步骤,服务器基本搭建完毕,接下来就开始一步步搭建框架了. 拆分单一结构:拆分的目的是为下一步引入dubbo做准备的. 把下边这个单一maven框架进行拆分 这个就是一个简单的maven项 ...
- 安装以及构建SSIS
SSIS使用教程可以参照微软官网实例:https://msdn.microsoft.com/zh-cn/library/ms169917(v=sql.105).aspx 1.安装visual stud ...
- Cocos2d-x游戏导出android工程，提取cocos的so文件
Cocos2d-x游戏导出android工程,提取cocos的so文件 原本cocos游戏的android工程编译时,需要将cocos的库文件进行编译,这些文件大部分是cpp文件, 使用ndk ...
- Struts动态表单（DynamicForm）
动态表单的含义是不要手动定义,直接在配置文件中进行定义. 1.手动进行定义 <form-beans > <form-bean name="userForm" ty ...
- antlr4 接触
1. 配置IDE(可选) 2. 加减法示例 编写expr.g4 grammar AddMinus; expr: Minus Number #minusNum | expr op=('+'|'-') e ...
- Hive use mapreduce引擎 bsonFile splits报错处理
Hive use mapreduce引擎 1. 出现报错.关于bsonFile的.禁止hdfs里面存储的bson文件自动splits. 可以在hive-site.xml文件里面添加如 ...