position属性常用属性值(position值都有哪些)

2025-03-10 10:30:02 0

position属性常用属性值(position值都有哪些)

本文目录

position值都有哪些

absolute生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left“, “top“, “right“ 以及 “bottom“ 属性进行规定。fixed生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left“, “top“, “right“ 以及 “bottom“ 属性进行规定。relative生成相对定位的元素,相对于其正常位置进行定位。因此,“left:20“ 会向元素的 LEFT 位置添加 20 像素。static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。inherit规定应该从父元素继承 position 属性的值。

position属性有哪4种取值有何区别

Position属性有以下四个取值:

static:静态定位,是position属性的默认值,表示无论怎么设置top、bottom、right、left属性元素的位置(与外部位置)都不会发生改变;

relative:相对定位,表示用top、bottom、right、left属性可以设置元素相对与其相对于初始位置的相对位置;

absolute:绝对定位,表示用top、bottom、right、left属性可以设置元素相对于其父元素(除了设置了static的父元素以外)左上角的位置,如果父元素设置了static,子元素会继续追溯到祖辈元素一直到body;

fixed:绝对定位,相对于浏览器窗口进行定位,同样是使用top、bottom、right、left。

其实fixed和absolute是一样的,唯一的区别在于:absolute元素是根据最近的定位上下文确定位置,而fixed永远根据浏览器确定位置。

在这里要注意别跟Fixed值混淆,absolute并不是永远根据浏览器窗口进行定位的,这是Fixed的特性,absolute要更加复杂:

一般情况下以父级的左上角定位,在没有父级的时候,他是参照浏览器左上角(这与relative完全一致);

如果在没有父级元素的情况下,存在文本,则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字,覆盖于上方(这里是与relative的第二个不同点);

如果父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由偏移设置(top、bottom、left、right)决定(这与relative完全一致);

如果父级设定position属性(无论是absolute还是relative),则以父级的左上角为原点进行定位,位置由偏移设置(top、bottom、left、right)决定(这与relative完全一致);

即使父级有Padding属性,对其也不起作用,说简单点就是:它只坚持一点,就以父级左上角为原点进行定位,父级的padding对其根 本没有影响(这里是与relative的第三个不同点)。

CSS中position是什么属性,有那些属性值

position 属性指定了元素的定位类型。语法,position:static -默认值,没有定位,遵循正常的文档流对象;position:fixed -元素的位置相对于浏览器窗口是固定位置;position:relative -相对定位元素的定位是相对其正常位置;position:absolute --绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于《html》;position:sticky -粘性定位,基于用户的滚动位置来定位。它的行为就像position:relative;而当页面滚动超出目标区域时,它的表现就像position:fixed;,它会固定在目标位置。示例《style》.dianqi{ position:fixed;}

Css中的position属性常用取值有哪些分别是什么意思

值描述absolute生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。元素的位置通过“left“,“top“,“right“以及“bottom“属性进行规定。fixed生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过“left“,“top“,“right“以及“bottom“属性进行规定。relative生成相对定位的元素,相对于其正常位置进行定位。因此,“left:20“会向元素的LEFT位置添加20像素。static默认值。没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)。inherit规定应该从父元素继承position属性的值。

css样式中,position元素有几个属性它们之间有什么联系和区别

CSS position 属性通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。position 属性值的含义:static元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。relative元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。absolute元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。fixed元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。提示:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

position属性常用属性值(position值都有哪些)

本文编辑:admin

更多文章:


nailed(nail 什么意思)

nailed(nail 什么意思)

本文目录nail 什么意思nailed it 在俚语里 是搞定了 的意思吗 请从文化上讲解一下为什呢这么说谢谢nailed it 在俚语里 是搞定了 的意思吗nail什么意思足球解说中nail还是什么单词,是什么意思nail 什么意思n.钉

2025年2月11日 11:40

js中时钟特效代码(js Canvas实现的日历时钟案例有哪些)

js中时钟特效代码(js Canvas实现的日历时钟案例有哪些)

本文目录js Canvas实现的日历时钟案例有哪些JS简单时钟的小白问题用JavaScript编写一个动态实时显示的数字时钟代码谁能解释下JS实现的时钟功能代码的意义吗万分感谢!javascript动态显示时间用JS实现钟表计时器功能求Ja

2025年2月19日 08:30

impala雪佛兰(雪佛兰英帕拉是几几年生产的)

impala雪佛兰(雪佛兰英帕拉是几几年生产的)

本文目录雪佛兰英帕拉是几几年生产的雪弗莱impala价钱雪佛兰IMPALA的简介雪佛兰impala叫什么名字Impala是什么车雪佛兰英帕拉是几几年生产的  作为通用汽车公司雪佛兰旗下的著名车型,英帕拉诞生于1958年,当时他是一种装备大扭

2025年2月24日 20:40

bmp文件格式详解(什么是BMP格式呀)

bmp文件格式详解(什么是BMP格式呀)

本文目录什么是BMP格式呀bmp是什么格式bmp文件格式怎么打开BMP是什么文件格式,如何打开BMP文件BMP的格式是什么bmp是什么文件格式BMP是什么文件bmp是什么图像文件格式什么是BMP格式呀bmp是位图格式,是windows使用的

2025年3月23日 22:20

c语言标识符有哪些(C语言的32个标识符是那32 个啊有专业人士能列举全部吗)

c语言标识符有哪些(C语言的32个标识符是那32 个啊有专业人士能列举全部吗)

本文目录C语言的32个标识符是那32 个啊有专业人士能列举全部吗C语言中类型标识符有哪些C语言的32个标识符是那32 个啊有专业人士能列举全部吗你的说法不对,应该指的是具有特定意义的标识符吧,也就是关键字(保留字)如下:auto,break

2025年2月13日 02:20

php零基础视频教程(php前端和后端如何零基础学习)

php零基础视频教程(php前端和后端如何零基础学习)

本文目录php前端和后端如何零基础学习零基础如何自学PHP,最终达到求职水平php前端和后端如何零基础学习首先来说,现在的前端越来越偏后端化了。以前的前端更多的就是排排版、切切图、改个特效,而当下的前端逐渐后端化了,如服务端渲染等,也有了“

2025年2月22日 00:30

二建报名时间2020官网(什么时候能报考二建)

二建报名时间2020官网(什么时候能报考二建)

本文目录什么时候能报考二建2020全国二建考试时间是什么时候一年考几次什么时候能报考二建函授大专毕业,只有毕业证下来就可以报考二建。二级建造师报考条件是中专及以上学历工程类或工程经济类专业从事相关专业2年以上。一般从事年限就是按照毕业时间开

2025年3月26日 18:30

ip地址dhcp是什么意思(手机上ip设置里的dhcp是什么)

ip地址dhcp是什么意思(手机上ip设置里的dhcp是什么)

本文目录手机上ip设置里的dhcp是什么ip地址类型通过DHCP指派是什么意思手机上ip设置里的dhcp是什么DHCP就是动态获取IP。另外还有静态,就是需要手动输入IP地址和DNS之类的信息。这俩个有个前提就是路由器上是怎么设置的,如果路

2025年3月15日 12:40

argumentation和argument的区别(编程中argument什么意思一定要准确..)

argumentation和argument的区别(编程中argument什么意思一定要准确..)

本文目录编程中argument什么意思一定要准确..argumentation 和argument有什么区别编程中argument什么意思一定要准确..argument 和parameter 一样,都是函数的参数。parameter是指函

2025年2月21日 06:00

软件测试是干什么的?软件测试是什么

软件测试是干什么的?软件测试是什么

本文目录软件测试是干什么的软件测试是什么软件测试的基本方法和流程软件测试有哪些种类黑马程序员有软件测试的班级吗想要软件测试培训视频,谁有松勤软件测试零基础就业课程/自动化测试课程视频教程软件测试的历史和发展高级软件测试工程师和初级软件测试工

2025年3月11日 09:00

administratively(administration是什么意思)

administratively(administration是什么意思)

本文目录administration是什么意思administratively-prohibited是什么意思difficult所有形式是什么int vlan 1 administratively down是什么意思administrati

2025年2月24日 10:40

miui系统(miui优点)

miui系统(miui优点)

本文目录miui优点MIUI是什么系统为什么都说miui好用miui系统更新叫什么miui优点MIUI是一个基于CyanogenMod而深度定制的Android流动操作系统,它大幅修改了Android本地的用户接口并移除了其应用程序列表(A

2025年3月17日 20:10

python range(python相对于range应该更倾向于实用xrange吗)

python range(python相对于range应该更倾向于实用xrange吗)

本文目录python相对于range应该更倾向于实用xrange吗python,使用range语句产生0到1之间的10个数Python由大到小输出列表中的元素(不用函数,用逻辑for之类的)python相对于range应该更倾向于实用xra

2025年2月23日 03:00

点击查看源网页(win7系统查看网页源文件的三种方法)

点击查看源网页(win7系统查看网页源文件的三种方法)

本文目录win7系统查看网页源文件的三种方法怎么查看网页的源文件win7系统查看网页源文件的三种方法解决方法1:1、打开一个网页之后,右键---》查看源文件(IE10 为查看源),然后就会弹出网页的源文件;2、点击之后就会出现一个文本样式的

2025年3月28日 06:00

计算机专业主要学什么?计算机学哪个专业好

计算机专业主要学什么?计算机学哪个专业好

本文目录计算机专业主要学什么计算机学哪个专业好电脑学什么专业好学计算机学什么专业好大学学计算机的准大一生如何利用暑假掌握一些相关的基础知识零基础怎么开始学计算机大一新生如何自学计算机0基础想自学计算机,应该从何开始自学计算机该先从什么开始学

2025年2月22日 11:50

inquiry和enquiry(英语inquire和enquire区别是什么)

inquiry和enquiry(英语inquire和enquire区别是什么)

本文目录英语inquire和enquire区别是什么enquiry和inquiry的区别enquiry和inquiry都有询盘的意思,那在用的时候到底有什么区别呢英语inquire和enquire区别是什么inquire和enquire的区

2025年3月9日 17:40

二叉树的遍历(二叉树的遍历是怎么回事)

二叉树的遍历(二叉树的遍历是怎么回事)

本文目录二叉树的遍历是怎么回事如何实现二叉树的遍历何谓二叉树的遍历怎么正确理解二叉树的遍历什么叫二叉树前序遍历,中序遍历,后序遍历二叉树的前序中序后序遍历访问顺序是怎么回事啊搞不懂写出二叉树的先序遍历、中序遍历、后序遍历二叉树先序遍历,中序

2025年2月9日 22:50

mysql数据库迁移(如何将mysql数据库复制到另一台服务器)

mysql数据库迁移(如何将mysql数据库复制到另一台服务器)

本文目录如何将mysql数据库复制到另一台服务器如何复制MySQL数据库或表到另外一台服务器如何将MySQL数据迁移到SQLServer中如何将mysql数据库复制到另一台服务器将原机器上的mysql/data下的你的数据库目录整个拷贝下来

2025年3月30日 18:50

div css在线(div+css是什么)

div css在线(div+css是什么)

本文目录div+css是什么DIV +css 高度自适应问题,在线求各位大虾解答!怎么用div布局加css样式做网页css 怎么实现 div水平居中 呢高手们进来帮帮忙吧,在线等!!用div+css写如何用DIV+CSS进行网页样式布局在线

2025年2月15日 02:50

jsonobject依赖(什么时候用jsonobject jsonarray.fromobject)

jsonobject依赖(什么时候用jsonobject jsonarray.fromobject)

本文目录什么时候用jsonobject jsonarray.fromobjectjsonobject怎么获取json中某个值jmeter 解析json时,报错JSONObject not found in namespacemaven对于j

2025年2月23日 20:20

近期文章

本站热文

harbor,port,pier的区别?谁能解释“harbour“(港口)与“pier“(码头)的区别
2025-02-22 17:40:03 浏览:18
ibatis foreach(ibatis 批量update操作)
2025-02-10 23:40:06 浏览:7
endless rain(endless rain表达什么情感)
2025-02-14 06:00:02 浏览:6
标签列表

热门搜索