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

时间: 2018-04-16阅读: 629标签: 布局
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属性值。



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

css实现三栏布局的几种方法及优缺点

三栏布局,顾名思义就是两边固定,中间自适应。三栏布局在实际的开发十分常见,比如淘宝网的首页,就是个典型的三栏布局:即左边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应。

移动端web自适应适配布局解决方案

100%还原设计图,要注意: 看布局,分析结构。感觉难点在于:1.测量精度(ps测量数据);2.文字的行高。自动适应屏幕宽度 :网页的宽度默认等于屏幕的宽度

html使用frame框架导航跳转至指定的节的用法

主要内容:左侧的导航框架包含了一个链接列表,这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。

html页面body与div之间产生空白解决方法

在做一个页面输出时发现body与div之间出现20px左右高度的空白,尝试多种方法无解,尤其是方法1也解决不了,后来发现原来是html文件编码格式问题造成的!css初始化,解决不了,就将html文件格式保存为utf-8编码格式,即问题完美解决

rem布局和vw布局的理解

rem是一个灵活的、可扩展的单位,由浏览器转化像素并显示。与em单位不同,rem单位无论嵌套层级如何,都只相对于浏览器的根元素(HTML元素)的font-size。css3中引入了一个新的单位vw,与视图窗口有关,vw表示相对于视图窗口的宽度,除了vw,还有vmin和vmax两个相关的单位。

css实现保持div的等宽高比

css如何实现高度height随宽度width变化保持比例不变呢?即给定可变宽度的元素,它将确保其高度以响应的方式保持成比例(即,其宽度与高度的比率保持恒定)。这里以 4:3 为例,通过2种方式来实现

vue实现瀑布流布局的组件/插件总汇

瀑布流作为当前比较流行的一种网页布局方式,在视觉上呈现出参差不齐、琳琅满目、唯美的视觉效果,该布局随着页面滚动,数据不断加载并附加至当前页面的尾部。这篇文章主要介绍关于vue框架中常使用的瀑布流组件

纯css实现瀑布流(multi-column多列及flex布局)

瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了。纯css实现的瀑布流只能是一列一列的排布,所以还是得用js来实现瀑布流更符合我们常见的瀑布流

height百分比失效_解决css中height:100%失效的问题

为了让网页内容更好的适应各类屏幕尺寸,一般都需要用到height:100%。但是会发现,height百分比失效并没有生效,这是什么原因造成的呢,以及我们需要如何解决呢?

什么是BFC布局——浅析BFC布局的概念以及作用

BFC 可以简单的理解为某个元素的一个 CSS 属性,只不过这个属性不能被开发者显式的修改,拥有这个属性的元素对内部元素和外部元素会表现出一些特性,这就是BFC

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

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯