CSS中的四种定位方式
在CSS中定位有以下4种:
静态定位 - static
相对定位 - relative
绝对定位 - absolute
固定定位 - fixed
静态定位 - static
静态定位是css中的默认定位方式,也就是没有定位。在此定位方式中设置:top,bottom,left,right,z-index 这些属性都是无效的。
相对定位 - relative
<style>div{position: relative;background-color: red;border-top:1px solid #000 }</style>
相对位置前的位置:
<style>div{position: relative;background-color: red;border-top:1px solid #000;top: 30px;left: 30px;}</style>
相对位置后的位置:
可以看到该元素向右下各偏移了30px.
相对定位的特点就是元素本身在文档流中的占位不变,无形的东西就是B元素在文档流中的占位,这也是为什么C元素不会浮动过去的原因。可以想象成B元素的本体依然处于普通文档流中,它的替身在参照本体进行移动。
绝对定位 - absolute
绝对定位是参考父元素的相对定位来实现的:
#A{position: relative;background-color: red;border-top:1px solid #000;height: 300px;width: 300px;/* left: 30px;top: 30px; */}#B{position: absolute;background-color: rgb(17, 255, 0);border-top:1px solid #000;height: 100px;width: 100px;left: 30px;top: 30px;}
可以看出绿色div是以红色为定位位移30px,为了验证他是以父级进行定位,我们改变父级的位置:
#A{position: relative;background-color: red;border-top:1px solid #000;height: 300px;width: 300px;left: 30px;top: 30px;}#B{position: absolute;background-color: rgb(17, 255, 0);border-top:1px solid #000;height: 100px;width: 100px;left: 30px;top: 30px;}
可以看出,B是以父级为参照进行定位,如果所有父级都没有设置相对定位,那么它将根据根元素html进行偏移。
固定定位 - fixed
固定定位比较简单,固定定位是参照浏览器窗口的左上角进行偏移。
固定定位的特点就是:无论如何滑动页面,固定定位的元素位置都不会被改变,完全脱离文档流。
另外,如果设置了固定定位的元素也设置了width或height的百分比值,那么此百分比的值是参照窗口宽高来计算的。
z-index属性:
z-index属性是设置元素的层级,数值低的会被数值高的遮住。
CSS中的四种定位方式相关推荐
- CSS的四种定位方式
CSS的四种定位方式 1.静态定位: 设置方式为position: static;静态定位的盒子是标准流状态,用于取消定位.静态定位的盒子处于网页的最底层,并且top.left.bottom.righ ...
- html之CSS设计(四种引入方式、各种选择器)
文章目录 一.CSS简介 二.四种引入方式 三.CSS选择器 四.练习代码 本文主要介绍一下CSS的基本操作,四中引入方式和选择器.属性选择器的使用 一.CSS简介 1.介绍: 也叫层叠样式表,用来控 ...
- Oracle中的四种去重方式
create table test(id int primary key not null,name varchar(10) not null,age int not null );insert in ...
- 关于四种定位方式的介绍
定位,同浮动一样是前端开发人员进行css布局的另一神器.浮动布局比较灵活,但不容易控制,定位布局则相反,可以让用户精确地控制元素在页面中的位置"指哪打哪",但缺乏浮动布局的灵活性. ...
- CSS中的四种样式及选择器
CSS语法 选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素. 属性:属性是指定选择符所具有的属性,它是css的核心,css2共有150多个属性 属性值:属性值包括法定属 ...
- HTML中的几种定位方式
1,static(默认) 当你没有为一个元素(例如div)指定定位方式时,默认为static,也就是按照文档的流式(flow)定位,将元素放到一个合适的地方.所以在不同的分辨率下,采用流式定位能很好的 ...
- css水平垂直居中四种常用方式
css水平垂直居中 第一种:flex布局水平垂直居中 思路: 给父盒子display属性设置flex值,然后使用justify-content与align-item属性进行居中. 参考:阮一峰的fle ...
- Hive中的四种排序方式(order by,sort by,distribute by,cluster by)使用与区别详解
在平时的Hive数仓开发工作中经常会用到排序,而Hive中支持的排序方式有四种,这里结合具体的案例详细介绍一下他们的使用与区别: order by sort by distribute by clus ...
- python的ols_【量化工具】OLS在python中的四种实现方式
在p-quant中,线性回归应该是最最最重要的统计方法了,没有之一:OLS又是线性回归中最常见的形式,在python中可以利用多个方法来实现 考虑线性回归如下形式 一.sklearn from skl ...
最新文章
- 有重叠与无重叠序列之序列检测与序列产生
- [转]设计模式(22)-Strategy Pattern
- UA MATH563 概率论的数学基础 鞅论初步7 停时与Upcrossing不等式
- Redis 的源码分析
- CH5E02 花店橱窗【线性DP】
- java面板如何设置大小_java面板调整大小问题
- Reat学习01——初步接触与安装
- BERT模型蒸馏有哪些方法?
- css家用电器,家用电器
- 图灵奖大佬 Lecun 发表对比学习新作,比 SimCLR 更好用!
- linux系统可以用迅雷吗,在Linux系统下使用wine运行迅雷5的方法
- 带你了解AKG正反向算子注册+关联流程
- 95-20-050-启动器-ServerBootstrap
- 社区发现(一)--算法综述
- mysql 多个命令行,5.8.2.1在Windows命令行中启动多个MySQL实例
- Android studio 老虎机小游戏
- web用pdfobject 对pdf 预览文件
- 有了这个 Python 库,以后再也不用写正则表达式了
- 股票量化分析工具QTYX使用攻略——北上资金持仓选股(更新2.5.8)
- 产品新人如何才能找到第一份产品工作?