CSS position 属性_css中常用position定位属性介绍

时间: 2018-04-16阅读: 1649标签: 布局
css可以通过为元素设置一个position属性值,从而达到将不同的元素显示在不同的位置, position定位是指定位置的定位,以下为常用的几种:


1、static(静态定位)

这个是元素的默认定位方式,元素出现在正常的文档流中,会占用页面空间。也就是按照文档的书写布局自动分配在一个合适的地方,这种定位方式用margin来改变位置, 不能使用top,bottom,left,right和z-index。  这种定位不脱离文档流


2、relative定位(相对定位)

该定位是一种相对的定位,相对于其父级元素(无论父级元素此时为何种定位方式)进行定位,准确地说是相对于其父级元素所剩余的未被占用的空间进行定位(在父元素由多个相对定位的子元素时可以看出),且会占用该元素在文档中初始的页面空间,即在使用top,bottom,left,right进行移动位置之后依旧不会改变其所占用空间的位置。可以使用z-index进行在z轴方向上的移动。这种定位不脱离文档流


3、absolute定位(绝对定位)

绝对定位方式,脱离文档流,不会占用页面空间。以最近的不是static定位的父级元素作为参考进行定位,如果其所有的父级元素都是static定位,那么此元素最终则是以当前窗口作为参考进行定位。可以使用topbottomleftright进行位置移动,亦可使用z-indexz轴上面进行移动。当元素为此定位时,如果该元素为内联元素,则会变为块级元素,即可以直接设置其宽和高的值;如果该元素为块级元素,则其宽度会由初始的100%变为auto。

注意:当元素设置为绝对定位时,在没有指定topbottomleftright的值时,他们的值并不是0,这几个值是有默认值的,默认值就是该元素设置为绝对定位前所处的正常文档流中的位置。(可能我没有描述的很清楚,建议自己写个示例看看效果)。在没有父元素的条件下,它的参照为body。


4、fixed(固定定位)
这种定位方式是相对于整个文档的,只需设置它相对于各个方向的偏移值,就可以将该元素固定在页面固定的位置,通常用来显示一些提示信息,脱离文档流


5、inherit定位
这种方式规定该元素继承父元素的position属性值。



注释:脱离文档流指元素在文档中被删除,该元素原先的位置被其它元素填充。

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/646

关闭

基于jquery 横向/纵向 时间轴插件推荐

这篇文章主要整理一些关于基于jquery,实现横向/纵向时间轴的插件推荐:jquery.jqtimeline插件、timeline.js插件、Timeglider.js插件、Melon HTML5 、jQuery Timelinr、Timeline Porfolio

移动端导航布局

写在最前:移动端中导航的网格式布局无处无在,宽高怎么设置相适应?元素怎么居中对齐?不同场景怎么选择代码最高效?巧妙使用margin、padding等基础属性,小小技巧可以解决许多烦恼!

flex布局

Flex(Flexible Box)弹性布局:任何一个容器都可以指定为Flex布局,注意,设为flex布局以后,子元素的float、clear和vertical-align属性将失效,采用flex布局的元素,称为flex容器(flex container)

html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮

在我们的实际开发中,经常会遇到页面中需要悬浮效果,本文将介绍通过fixed的实现,以及通过原生Js实现滚动到一定位置,实现div的悬浮

解决页面缩小时页面布局会乱的问题

给body加上一个min-width最小宽度,以px为单位,这样当页面变小时,当达到你所设置的最小宽度,body的宽度不再改变,超出的部分会用横向滚动条显示,其内所有元素的布局也不会受影响。

CSS五种方式实现 Footer 置底

页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部。当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部;但如果网页内容不够长,置底的页脚就会保持在浏览器窗口底部。

css两端对齐——div+css布局实现2端对齐的4种方法总结

css两端对齐,通过margin负值、justify、space-between、column-count等多种方式来实现css的两端对齐。

css Grid布局

Gird布局是什么?Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格 ; 能够将网页分成具有简单属性的行和列来完成我们需要的网格布局

CSS:BFC规则的应用自适应两栏布局

两栏布局是写页面时经常用到的,要想实现两栏布局,就需要明白BFC规则,Block formatting context,直译为“块级格式化上下文”,可以简单的理解它为一个独立的区域,把区域内部元素与外部元素区分开,两者互不干扰。

关于display:flex碰上white-space nowrap 影响布局的问题

背景,做一个前面图片宽度固定,后面宽度自适应,使用到了flex布局,但是想让后面div里文字不换行,超出以点点表示时,这时布局就乱了,查了下,原来flex布局与white-space:nowrap有影响

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!