Heim > Web-Frontend > CSS-Tutorial > Hauptteil

CSS定位position的多种方式以及不同方式之间的区别

yulia
Freigeben: 2018-09-11 18:03:36
Original
1602 Leute haben es durchsucht

在进行前端布局的时候,我们经常会用到定位,定位是CSS中重要的一部分,定位是用定位属性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 属性的值。

首先,我们这里用的是标准盒子模型来讲,所以大家在理的时候必需把它看成一个盒子或者一个框。我们先来学习第一个默认参数static。

static:静态定位是position的默认值,元素框正常生成,也就是没有定位时的正常显示。
absolute:绝对定位
元素从文档流删除,并相对于包含块定位。元素在原本的空间关闭。元素定位后生成一个块级框,不论它原来是行内元素还是块级元素。
这里的包含块是指:最近的position值不是static的祖先元素(块级或行内),一般会指定一个元素作为绝对定位元素的包含块,将其position设置为relative而且没有偏移。

fixed:固定定位
元素脱离文本流,从普通文本中删除,并相对于浏览器视窗定位,因此不随文档滚动而移动。元素在原本的空间关闭。元素定位后生成一个块级框,不论它原来是行内元素还是块级元素。与绝对定位的区别仅仅是包含块不同。包含块:浏览器视窗。

relative:相对定位。相对定位,最常见的使用方式有如下两种:
使用方法一:元素相对自身的原位置偏移某个距离,但是原本的空间依旧保留,表现为空白。
使用方法二:把一个元素设置为position: relative; 可以使该元素的子元素相对该元素绝对定位。

absolute/fixed和float对比
相同之处:元素都会脱离文本流,从普通文本中删除,但是依旧会影响布局;都会生成一个块级框,无论原来是不是块级元素。
不同之处:float的包含块是最近的块级祖先元素。

设置偏移属性:top/right/bottom/left,初始值是auto。
采用position定位之后必须采用偏移属性定义偏移量,也就是相对包含块的偏移。在使用的时候需要注意的是:定义偏移量的元素应为position值不是static的元素。
有时也需要定义width和heigth,但是可能会和偏移属性的定义冲突,因为四个偏移属性实际上已经定义了元素的大小。此时,根据width和left属性定义左右,根据top和height属性定义上下。

CSS中的别一个属性。那就内容溢出:overflow
通常内容溢出属性有如下几个值:
overflow: visible/ hidden/ scroll /auto/ inherit
overflow初始值是visible。
overflow就是咱们常用在:如果一个元素的大小固定,但是其内容放不下,就会导致溢出。overflow控制溢出部分的可见(visible)、不可见(hidden)、滚动可见(scroll)。
元素可见性visibility: visible/ hidden/ collapse/ inherit,初始值是visible。

Das obige ist der detaillierte Inhalt vonCSS定位position的多种方式以及不同方式之间的区别. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!