首页 技术 正文
技术 2022年11月21日
0 收藏 523 点赞 4,217 浏览 663 个字

一、position 属性规定元素的定位类型,它一般有以下四个值:

默认static

相对定位relative

绝对定位absolute

固定定位fixed

元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性,他们也有不同的工作方式,这取决于定位方法。

二、实例讲解

1、默认static

HTML 元素的默认值,没有定位,遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

2、相对定位relative

元素相对自身偏移某个位置,元素扔保持其未定位的形状,它原本所占用的空间仍会保留,子元素可相对该元素进行绝对定位。

实际案例效果:

css定位有哪几种方式css定位有哪几种方式

3、绝对定位absolute

赋予绝对定位的元素会从文档流中拖出,使用left、right、top、bottom等属性相对于相对于最近的已定位的父级元素进行绝对定位,如果元素的父级没有设置定位属性,则根据 body 元素左上角作为参考进行定位。绝对定位元素可层叠,层叠顺序可通过 z-index 属性控制,z-index值为无单位的整数,0位默认值,大的在上面,可以有负值。

实际案例效果:

css定位有哪几种方式css定位有哪几种方式

4、固定定位fixed

不占空间,相对于浏览器的窗口来定位,这意味着即便页面滚动,它还是会停留在相同的位置,一个固定定位元素不会保留它原本在页面应有的空隙。

实际案例效果:

css定位有哪几种方式css定位有哪几种方式

逆战班学习总结:定位在网页布局中也是经常会用到的,在使用的时候一定要考虑好定位值是否占空间,该使用哪一个,尤其是要注意绝对定位在使用的时候一定要搭配着相对定位使用才可以发挥作用。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,954
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,479
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,291
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,108
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,740
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,774