CSS定位Position属性

访客4年前黑客工具401

用Div+CSS举行网站结构时,做一些浮动层等特殊特殊效果时要考虑到定位问题;这就要用到Position属性。 Position属性有四个值:static、fixed、absolute和relative。

后面两个值在结构中的定位里是经常用到的,顾名思义:


● absolute是指绝对定位

即将工具从文档流中拖出,使用left,right,top,bottom等属性举行绝对定位,而其层叠通过z-index属性界说。此时工具不具有边距,但仍有补白和边框。



● ralative是指相对定位

就是依据left,right,top,bottom等属性在正常文档流中偏移位置。

然则,怎么个绝对法,又怎么个相对法呢?
以前我一直没有仔细去研究它,到详细应用时有时会有点迷糊,我信赖许多同伙也会有这样的问题。今天我特意测试了一下,得出了以下结论:



1、当Position属性值为Relative时

工具原来占有的位置保留,厥后面的工具按原来文档流仍然保持原来的位置。

top的值示意工具相对原位置向下偏移的距离,bottom的值示意工具相对原位置向上偏移的距离。两者同时存在时,只有Top起作用。

left的值示意工具相对原位置向右偏移的距离,right的值示意工具相对原位置向左偏移的距离。两者同时存在时,只有left起作用。


2、当Position属性值为absolute时

工具从文档流中抽取出来,原占有的位置被后面的工具顶替上来。

● top的值示意工具上边框与浏览器窗口顶部的距离,bottom的值示意工具下边框与浏览器窗口底部的距离。

两者同时存在时,只有top起作用;若是两者都未指定,则其顶端将与原文档流位置一致,即垂直保持位置稳固。

● left的值示意工具左边框与浏览器窗口左边的距离,right的值示意工具右边框与浏览器窗口右边的距离。

两者同时存在时,只有left起作用;若是两者都未指定,则其左边将与原文档流位置一致,即水平保持位置稳固。



在Position属性值为absolute的同时,若是有一级父工具(无论是父工具照样祖父工具,或者再高的辈分,一样)的Position属性值为Relative时,则上述的相对浏览器窗口定位将会酿成相对父工具定位,这对正确定位是很有辅助的。

思源资源网:分类流动

1.阿里云: 本站现在使用的是阿里云主机,平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入

相关文章

黑客对立的是什么(黑客的敌人是什么)

黑客对立的是什么(黑客的敌人是什么)

本文导读目录: 1、黑客,极客,骇客,红客,蓝客,白客,分别指的哪些人 2、恶意代码、病毒、木马和黑客是一种什么关系?有什么区别?危害有什么不同? 3、什么是黑客,黑客的起源 4、黑客,红...

2020年北大将建成世界一流大学真的吗?北京大学校长郝平说了什么

北京大学校长郝平在近日举行的北京大学校友工作研讨会上再次谈到了北京大学“双一流”建设的相关情况。 据北京大学校友网12月3日消息,11月30日,北京大学校友会第九届理事会第三次会议暨第十三次校友工作...

浅析企业后台的数据表格页面设计

近半年的工作中经常接触到后台页面的设计,企业后台数据的展示通常都是由大量的表格以及表单组成的,初接手时设计上存在很多困惑的地方。因为这类型的页面和平面的排版不同,没有印刷排版的经验可以追溯,也不像普通...

伴游可靠吗-【许睿敏】

“伴游可靠吗-【许睿敏】” 昵称:放任自由期待伴游气质:魅力时尚体重:保密体重:90斤职业:虎牙主播陪伴细则:位置和地点:倾向于1线2线城市。空闲时间:7/8月。所需支付的酬金:3k-8k不等之间...

战歌竞技场利息怎么计算的 战歌竞技场吃利息方法分享

战歌竞技场利息怎么计算的 战歌竞技场吃利息方法分享

战歌竞技场怎么吃利息?在战歌竞技场中新手最重要的事情就是升人口,4羁绊出来后就可以开始吃利息了。那么,游戏中有哪些方法可以吃到利息呢?下面就是战歌竞技场吃利息方法了,小伙伴们都来看看吧! 战歌竞技...

黑客松活动(黑客松是什么意思)

黑客松活动(黑客松是什么意思)

我怎样才能对计算机专业产生兴趣 1、参与计算机竞赛: 如果你对挑战性问题感兴趣,可以尝试参与计算机编程竞赛。这不仅能提高编程能力,还能培养兴趣。学习计算机科学基础知识: 了解计算机科学的基本概念,包括...