css定位属性的运用
position 定位
定位:主要解决叠加排列的问题。
position
1.static(默认)
2.relative : 相对定位
如果没有定位偏移量,对元素本身没有任何影响(一般用于需要加定位的父容器,既给了子元素定位的祖先元素,有对元素本身没有影响)
不使元素脱离文档流,空间是会被保留。
不影响其他元素布局
left、top、right、bottom是相对于当前元素自身进行偏移的
3.absolute : 绝对定位
使元素完全脱离文档流
使内联元素支持宽高 (让内联具备块特性)
使块元素默认宽根据内容决定(让块具备内联的特性)
如果有定位祖先元素相对于定位祖先元素发生偏移,没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)
注:如果祖先元素中有多个元素具备定位模式,那么是已离自己最近的祖先元素进行偏移。
4.fixed : 固定定位
相对于整个浏览器窗口进行偏移,在浏览网页的时候会固定在屏幕的某个位置,不受浏览器滚动条的影响(主要作用)
使元素完全脱离文档流
使内联元素支持宽高 (让内联具备块特性)
使块元素默认宽根据内容决定(让块具备内联的特性)
不会受到祖先元素的影响。
5.sticky : 黏性定位
在没有到达指定位置的时候,是没有定位效果的,到达了指定位置,就变成了固定模式。
定位偏移量 : left top right bottom , 不能单独使用,必须得配合定位模式。(一般用法是给父容器加相对定位,但不加定位偏移量。)
6.z-index: 定位层级
默认层级为0.(如果都不设置层级,后写的层级高,但比较的时候还是0。)
比较的时候,会先跟同级别的先比较。(比较的时候,必须有定位模式和z-index)
css定位属性的运用的更多相关文章
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
- css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性)
css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性) 一.总结 一句话总结:元素定位要用css定位属性,而且一般脱离文档流更加好操作.先设置为绝对定位,上左都50%,然后margi ...
- CSS - 定位属性position使用详解(static、relative、fixed、absolute)
position 属性介绍 (1)position 属性自 CSS2 起就有了,该属性规定元素的定位类型.所有主流浏览器都支持 position 属性. (2)position 的可选值有四个:sta ...
- CSS定位属性
定位属性 position属性 1. s ...
- css 定位属性position的使用方法实例-----一个层叠窗口
运行结果: <!DOCTYPE html> <html> <head> <title>重叠样式窗口</title> <style ty ...
- 关于CSS定位属性 position 的使用
CSS中一般通过浮动和定位来对标签进行位置操作.下面我们来讨论一下定位的用法和需要注意的地方. 1.首先,说一下position的几个属性值 (1)none属性值,这个是定义不进行定位,默认为不定位, ...
- CSS定位属性position相关介绍
position属性用来定义元素的定位方式. 定位相关属性值 1.static 默认值 2.absolute 绝对定位 3.fixed 固定定位 4.relative 相对定位 5.sticky 粘性 ...
- 转:CSS定位属性详解
转载:https://juejin.im/post/5a1bb35ff265da43231ab164 这篇文章对css的绝对定位和相对定位有详细的解释
- (七)CSS定位(Positioning)
CSS定位属性允许对元素进行定位. 一切皆为框: div.h1或p元素常被称为块级元素,而span和strong等元素成为行内元素,但是可是使用 display 属性改变框的类型,将display设置 ...
随机推荐
- 链终止法|边合成边测序|Bowtie|TopHat|Cufflinks|RPKM|FASTX-Toolkit|fastaQC|基因芯片|桥式扩增|
生物信息学 Sanger采用链终止法进行测序 带有荧光基团的ddXTP+其他四种普通的脱氧核苷酸放入同一个培养皿中,例如带有荧光基团的ddATP+普通的脱氧核苷酸A.T.C.G放入同一个培养皿,以此类 ...
- cas单点登录打包时下载慢!
环境:win10 百度网盘下载 版本: cas-overlay-template-5.3 提取码 d1b6 添加阿里的到pom.xml 注意添加到第一列 <!--阿里云仓库--& ...
- Spring Security基本原理
近期研究了Spring Security,现进行记录. 首先先进行一个最简单的demo.默认情况下,在Spring Boot里,如果在classpath下面有Spring Security相关的jar ...
- python入门机器学习,3行代码搞定线性回归
本文着重是重新梳理一下线性回归的概念,至于几行代码实现,那个不重要,概念明确了,代码自然水到渠成. “机器学习”对于普通大众来说可能会比较陌生,但是“人工智能”这个词简直是太火了,即便是风云变化的股市 ...
- MySQL5.7彻底取消主从复制
由于手误在master节点执行了stop slave;->change master to XXX;->start slave;的动作,后面虽然使用stop slave停止了主从复制,但是 ...
- flask_admin+flask_login 整合,jieba分词+echarts数据分析可视化
项目地址: https://github.com/WES6/list
- OSX安装Mysql8.0
OSX下MySQL的安装非常方便,可以通过官网的dmg包进行安装,也可通过brew进行安装.以下介绍如何通过brew如何安装MySQL. 0X00.安装前的准备 既然要通过brew安装,那么就需要确保 ...
- JDK_Packages_java_utils
utils包需要关注的主要有 集合框架.并发包.函数式编程.观察者模式@see PropertyChangeSupport java.util(集合框架) Contains the collect ...
- Nginx502,504和499错误解决方案
499错误解决方案 499错误是什么?让我们看看NGINX的源码中的定义: ngx_string(ngx_http_error_495_page), /* 495, https certificate ...
- FPGA小白学习之路(6)串口波特率问题的处理
串口波特率问题的处理 此博文一共包含三个方面的内容:(1)异步串口通信的数据格式:(2)为何串口通信中接收端采样时钟频率是传输的波特率的16倍:(3)串口波特率等概念. 1.异步串口通信的数据格式 串 ...