下载文档原格式
CSS通过设置position定位的三种常⽤定位 CSS中可以通过设置为元素设置⼀个position属性值，从⽽达到将不同的元素显⽰在不同的位置，或者固定显⽰在某⼀个位置，或者显⽰在某⼀层页⾯之上。
position的值可以设为relative，absolute，fixed，static。
HTML代码⾥定义两个区块：1<div class="box">2<div class="box1"></div>3</div> 1.相对定位：1.box {2 width: 50px;3 height: 50px;4 position: relative;5 top: 50px;6 left: 10px;7 }以上代码将实现将box以box最初的位置向右移动50px，向下移动10px。
2.绝对定位：1.box1 {2 width: 10px;3 height: 20px;4 position: absolute;5 top: 10px;6 left: 10px;7 }以上代码将实现将box1的位置以当前的视⼝位置的原点为基准位置进⾏移动相应得距离；如果将box1的⽗级设置了relative，那么box1将会以box的原点进⾏位移。
1.box {2 position: relative;3 }4.box1 {5 width: 10px;6 height: 20px;7 position: absolute;8 top: 10px;9 left: 10px;10 } 3.固定定位：1.box {2 width: 50px;3 height: 50px;4 position: fixed;5 top: 20px;6 left: 0px;7 }以上代码将会将box固定在视窗的距离顶部20px的左侧边缘位置。
使⽤注意点：1.绝对定位会使元素脱离⽂档流，位于定位元素后⾯的元素将会移动到该元素的位置去填补空⽩区域；2.⼀般情况下，绝对定位都会和ixnagdui相对⼀起使⽤；3.使⽤fixed和absolute时，⼀定要认清谁是基准位置。
CSS样式规则定义对话框中英文对照CSS（Cascading Style Sheets）样式规则定义对话框中有很多常用的属性和值，它们可以帮助我们控制对话框的外观和行为。
以下是一些常用的CSS样式规则定义对话框的属性和值，以及它们的中英文对照。
1. Positioning（定位）:- position (定位方式)- top (顶部距离)- right (右侧距离)- bottom (底部距离)- left (左侧距离)- z-index (堆叠顺序)2. Box Model（盒模型）:- width (宽度)- height (高度)- margin (外边距)- padding (内边距)- border (边框)3. Typography（文本样式）:- font-family (字体)- font-size (字体大小)- font-weight (字体粗细)- font-style (字体样式)- color (文字颜色)- text-align (对齐方式)- text-decoration (文本装饰)4. Background（背景）:- background-color (背景颜色)- background-image (背景图片)- background-size (背景图片大小)- background-repeat (背景图片重复)5. Box Shadow（阴影）:- box-shadow (盒子阴影)- text-shadow (文字阴影)6. Transition（过渡效果）:- transition-property (过渡的属性)- transition-duration (过渡的时间)- transition-delay (过渡的延迟时间)- transition-timing-function (过渡的时间函数)7. Animation（动画效果）:- animation-name (动画名称)- animation-duration (动画时间)- animation-delay (动画延迟时间)- animation-iteration-count (动画循环次数) - animation-direction (动画方向)8. Border Radius（边框圆角）:- border-radius (边框圆角)9. Display（显示方式）:- display (显示方式)- visibility (可见性)- opacity (透明度)10. Flexbox（弹性盒子）:- display: flex (显示为弹性盒子)- flex-grow (弹性增长因子)- flex-shrink (弹性收缩因子)- flex-basis (弹性基准)- flex-direction (弹性盒子的排列方向)- justify-content (主轴对齐方式)- align-items (侧轴对齐方式)以上是一些常用的CSS样式规则定义对话框的属性和值，以及它们的中英文对照。
selenium css定位方法Selenium是一个用于自动化Web应用程序测试的工具，它支持多种定位元素的方法，其中包括CSS定位方法。
CSS定位方法是使用CSS选择器来定位页面元素的一种方式，它可以通过元素的属性、层级关系、文本内容等来定位元素。
在Selenium中使用CSS定位方法，可以通过以下方式实现：1. 通过class属性定位元素：可以使用".classname"的方式来定位具有特定class属性值的元素，例如：driver.findElement(By.cssSelector(".classname"));2. 通过id属性定位元素：可以使用"#id"的方式来定位具有特定id属性值的元素，例如：driver.findElement(By.cssSelector("#id"));3. 通过标签名定位元素：可以直接使用标签名来定位元素，例如：driver.findElement(By.cssSelector("input"));4. 通过属性定位元素：可以使用属性选择器来定位具有特定属性值的元素，例如：driver.findElement(By.cssSelector("[name='username']"));5. 通过层级关系定位元素：可以使用空格来表示层级关系，例如：driver.findElement(By.cssSelector("div input"));6. 通过组合定位元素：可以组合多个条件来定位元素，例如：driver.findElement(By.cssSelector("input[name='username']") );在使用CSS定位方法时，需要注意以下几点：确保选择器的准确性，避免选择到多个元素或选择不到元素；可以使用浏览器的开发者工具来辅助编写CSS选择器，以保证选择器的正确性；了解CSS选择器的语法和规则，可以更灵活地编写选择器。
前端CSS-相对定位,绝对定位,固定定位前端CSS - 相对定位,绝对定位,固定定位1.1 相对定位 position:relative相对定位,就是微调元素位置的.让元素相对⾃⼰原来的位置,进⾏位置的微调.也就是说,如果⼀个盒⼦想进⾏位置调整,那么就要使⽤相对定位了position:relative; →必须先声明，⾃⼰要相对定位了，left:100px; →然后进⾏调整。
top:150px; →然后进⾏调整。
1.2 相对定位的特性 - 不脱标,⽼家留坑,形影分离相对定位不脱标,真实位置是在⽼家,只不过影⼦出去了,可以到处飘.1.3 相对定位的⽤途相对定位有坑,所以⼀般不⽤于做"压盖"效果.页⾯中,效果极⼩.就两个作⽤:微调元素做绝对定位的参考,⼦绝⽗相(绝对定位中详细讲)1.4 相对定位的定位值可以⽤left,right来描述盒⼦右,左的移动可以⽤top,bottom来描述盒⼦的下,上的移动.position: relative;right: 100px; →往左边移动top: 100px;position: relative;right: 100px;bottom: 100px; →移动⽅向是向上。
2.1 绝对定位绝对定位脱标绝对定位的盒⼦,还脱离标准⽂档流的.所以,所有的标准⽂档流的性质,绝对定位之后都不遵守了.绝对定位之后,标签就不区分所谓的⾏内元素,块级元素了,不需要display:block;就可以设置宽⾼了span{position: absolute;top: 100px;left: 100px;width: 100px;height: 100px;background-color: pink;}2.2 参考点绝对定位的参考点,如果⽤top描述,那么定位参考点就是页⾯的左下⾓,⽽不是浏览器的左上⾓:如果⽤bottom描述,那么就是浏览器⾸屏窗⼝尺⼨,对应的页⾯的左下⾓:⾯试题:答案:⽤bottom的定位的时候,参考的事浏览器⾸屏⼤⼩对应的页⾯左下⾓.2.3 以盒⼦为参考点 - ⼦绝⽗相⼀个绝对定位的元素,如果⽗辈元素中出现了也定位了的元素,那么将以⽗辈这个元素,为参考点.⼦绝⽗绝,⼦绝⽗相,⼦绝⽗固,都是可以给⼉⼦定位的.但是,⼯程上,⼦绝,⽗绝,没有⼀个盒⼦在标准⽂档流中,所以页⾯就不稳固,没有任何实战⽤途.⼯程上,"⼦绝⽗相"有意义,⽗亲没有脱标,⼉⼦脱标在⽗亲的范围⾥⾯移动.<div class=”box1”> →绝对定位<div class=”box2”> →相对定位<div class=”box3”> →没有定位<p></p> →绝对定位，以box2为参考定位。
CssSelector定位详解⼀，为什么使⽤ cssSelector定位元素?⽬前针对⼀些常规定位⽅式有: By.id、、By.LinkTest(针对 <a>标签 )、By.ClassName 针对不太好定位的，⽐如:没有 id、name、class 的定位⽅式，或者说 id、name、class 的value 值显⽰重复，不太⽅便⼀下写出定位⽅式，这样可以考虑下其它定位⽅式。
以下主要介绍 cssSelector 如何解决id 、 name 、 class 的value 值显⽰重复的定位⽅式。
⼆，cssSelector选择器使⽤语法：三 .css常⽤的定位⽅式介绍*：E：代表的是标签;EF：隔着多层标签，称为后代元素。
通俗点说祖宗辈关系，例如爷爷和孙⼦关系;E>F： F 也是代表的标签，称为⼦代元素， F 是 E 的⼦代元素，说通俗⼀点 F 是 E 的⼉⼦关系， F紧跟着 E后⾯的第⼀个元素，直接的下⼀级;E+F：匹配紧随 E 元素之后的同级元素 F(只匹配第⼀个) ，称为毗邻元素选择器。
通俗点解释 E 是⼤哥，后⾯有多个弟弟，只取它最近⼀个弟弟 F;E ~ F：同级标签，称为同级元素选择器。
通俗称为兄弟关系，例如哥哥和弟弟关系;.info class:点代表 class;#footer id: #号代表 id ;E[att='val'] : E 代表标签， att 代表属性， val 指属性的值;E[att^='val']：E[att$='val']：E[att*='val'] ：E[att1='v1'][att2*='v2']: 多属性选择器，针对⼀个标签有多个属性，做并且的关系同时满⾜条件;E:contains('xxxx')：E:not(s)：：:nth-of-type和:nth-child：ele:nth-of-type(n) 是指其⽗元素下第 n 个 ele 元素。
元素定位之cssselector（选择器定位）CSS选择器是一种用来选择HTML元素的方法，它通过指定元素的一些特征、属性和层次关系来定位元素。
其中，CSS选择器中最强大的定位方法之一是CSS选择器定位（CSS Selector Locators），也称为CSS选择器定位。
CSS选择器定位有以下几种常用的方法：2. 类选择器（Class Selector）：通过选择元素的class属性值来定位元素。
在HTML中，可以通过在元素的class属性值前添加`.`（英文句点）来指定类选择器。
例如，通过`.header`选择所有class属性值为`header`的元素。
3. ID选择器（ID Selector）：通过选择元素的id属性值来定位元素。
在HTML中，可以通过在元素的id属性值前添加`#`（井号）来指定ID选择器。
例如，通过`#logo`选择id属性值为`logo`的元素。
5. 子元素选择器（Child Selector）：通过选择元素的直接子元素来定位元素。
子元素选择器使用`>`符号来表示。
例如，通过`div > p`选择所有直接子元素为`<p>`的`<div>`元素。
6. 后代元素选择器（Descendant Selector）：通过选择元素的后代元素来定位元素。
后代元素选择器使用空格来表示。
例如，通过`div p`选择所有后代元素为`<p>`的`<div>`元素。
7. 兄弟元素选择器（Adjacent Sibling Selector）：通过选择元素的相邻兄弟元素来定位元素。
兄弟元素选择器使用`+`符号来表示。
例如，通过`p + ul`选择所有与`<p>`元素相邻的`<ul>`元素。
以上只是CSS选择器定位的一些常见例子，实际应用中还有更多复杂的选择器定位方法。
通过灵活运用CSS选择器定位，我们可以精确地在HTML页面中定位到想要的元素，从而进行元素操作和页面交互。
css中position的用法CSS中的position属性是用来控制元素在网页中的位置。
它可以让我们更加灵活地布局和设计页面。
本文将为大家详细介绍CSS中position属性的用法。
第一步：介绍position的类型CSS中的position属性有4种类型：1. static：默认值。
元素在文档流中，不受top、bottom、left、right属性的影响。
2. relative：元素在文档流中，但可以通过top、bottom、left、right属性进行偏移。
3. absolute：元素脱离文档流，相对于最近的具有定位属性的父元素进行偏移。
4. fixed：元素脱离文档流，相对于浏览器窗口进行偏移。
第二步：介绍各种position的使用方法1. static因为static是默认值，所以使用时无需设置position属性，元素会按照默认规则在文档流中显示。
2. relative使用relative可以使元素从原来的位置进行偏移。
例如，设置top：20px可以使元素在当前位置向下偏移20px。
左右偏移同理，分别使用left和right属性。
这样偏移后，元素仍然在文档流中，不会对其他元素位置造成影响。
3. absolute使用absolute将使元素脱离文档流，不再占用原来的位置，相对于最近的具有定位属性的父元素进行定位，如果没有，则相对于文档进行定位。
可以使用top、bottom、left、right属性对元素进行定位。
例如，设置top: 50px，left: 100px，将使元素相对于父元素向下偏移50px，向右偏移100px。
如果想要元素生成一个新的定位上下文，可以给它的父元素设置position为relative或者其他的定位属性。
4. fixed使用fixed将使元素脱离文档流，相对于浏览器窗口进行定位。
可以使用top、bottom、left、right属性对元素进行定位。
例如，设置top: 50px，left: 100px，将使元素在浏览器窗口中向下偏移50px，向右偏移100px。
1．定位的专业解释(1)语法position : static | absolute | fixed | relative(2) 说明绝对定位（absolute）、相对定位（relative）。
绝对定位（absolute）：将被给予此定位方式的对象从文档流中拖出，利用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，若是对象的父级没有设置定位属性，即仍是遵循HTML定位规则的，则依据body 对象左上角作为参考进行定位。
绝对定位对象可层叠，层叠顺序可通过z-index 属性控制，z-index值为无单位的整数，大的在最上面，能够有负值（目前负值FF不支持）。
相对定位（relative）：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。
一样能够用z-index分层设计。
2．定位的形象解释我先来架设一个虚拟的场景：有一个矩形的房间，里面还有一个水桶装了些水，水里还浸泡着一个西瓜，那个房间半空中还有很多的钩子用于挂东西用。
此刻我把网页元素与上面物件对应上，那么房间就是一个网页，水桶是网页中的一个板块，桶中的水就是文本流，西瓜就是将要被定位的对象。
（1）奉献的绝对定位（absolute）对照前面解释，若是西瓜被给予绝对定位，那么就等于把西瓜从水中捞起来挂在半空中的钩子上，水桶中西瓜原来占用的空间水会自动填补它（绝对定位对象会让出自己原先占用位置，所以说它是奉献的）。
现在若是之前没有对水桶进行定位设定，那么被拿起的西瓜位置不会再受水桶位置影响，水桶怎么移动，西瓜仍是挂在原来位置，至于西瓜要怎放，则以房间左上角（body左上角）为准，用left，right，top，bottom值来定位。
可是若是水桶也给出了定位设置（一般是相对定位，下面有讲到这一实用技能），现在西瓜的摆放就没有那么自由了，虽然现在西瓜被拿起来了不会影响水桶中的水（文本流），但它仍是要听桶的话，桶会告知西瓜“你能够活动，但应该在我的范围内走动，例如说我要你在我左上方1米处，你就要跟死这一点，我走你也要随着走”，若是桶中有很多个西瓜，能够全数拿出来吊到半空中，它们将被安排在不同高度的空间（层），所以在房顶垂直往下看，有可能看到不同西瓜层叠在一路的情形（那个所谓的高度在网页中是不存在的，就像FLASH动画中的不同层上安排了元素，但它们在看时不会有深度感觉）。
css中元素定位方法
在CSS中，元素的定位方法主要有以下几种：
1.静态定位：这是元素的默认定位方式，元素按照正常的文档流进行排列。
使用position: static
属性设置。
2.相对定位：元素相对于其正常位置进行定位，因此“left:20px”会使元素向右移动20px。
相对定位
的元素不会脱离文档流，因此会占据空间。
使用position: relative属性设置。
3.绝对定位：元素相对于最近的已定位父元素（即设置了position: absolute或position: relative
的父元素）进行定位。
如果没有已定位的父元素，那么元素相对于初始包含块（通常是html元素）进行定位。
绝对定位的元素会脱离文档流，不占据空间。
使用position: absolute属性设置。
4.固定定位：元素相对于浏览器窗口进行定位，即使在滚动页面时，它也不会移动。
固定定位的元
素不脱离文档流，但会根据其设置的偏移量从正常位置偏移。
使用position: fixed属性设置。
以上四种定位方式各有特点，可以根据具体需求选择使用。
CSS——静态定位，相对定位，绝对定位，固定定位CSS中的定位使⽤来布局的熟练应⽤对页⾯美化有很好的帮助，下⾯就进⾏详细介绍：定位分为静态定位，相对定位，绝对定位，固定定位这四种，定位有不同的参数，例如：left、right、top、bottom、z-index等。
1、静态定位（static）⼀般的标签元素不加任何定位属性都属于静态定位，在页⾯的最底层属于标准流。
2、绝对定位（absolute）绝对定位的元素从⽂档流中拖出，使⽤left、right、top、bottom等属性相对于其最接近的⼀个最有定位设置的⽗级元素进⾏绝对定位，如果元素的⽗级没有设置定位属性，则依据 body 元素左上⾓作为参考进⾏定位。
绝对定位元素可层叠，层叠顺序可通过 z-index 属性控制，z-index值为⽆单位的整数，⼤的在上⾯，可以有负值。
绝对定位的定位⽅法：如果它的⽗元素设置了除static之外的定位，⽐如position:relative或position:absolute及position:fixed，那么它就会相对于它的⽗元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的⽗元素没有设置定位，那么就得看它⽗元素的⽗元素是否有设置定位，如果还是没有就继续向更⾼层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位的第⼀个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中⼀种定位，那么它就会相对于⽂档body来定位（并⾮相对于浏览器窗⼝，相对于窗⼝定位的是fixed）。
将class="two"的div定位到距离的顶部和左侧分别50px的位置。
会改变其他元素的布局，不会在此元素本来位置留下空⽩。
3、相对定位（relative）相对定位元素不可层叠，依据left、right、top、bottom等属性在正常⽂档流中偏移⾃⾝位置。
同样可以⽤z-index分层设计。
CSS框模型（盒模型）、定位、浮动、显示和隐藏◆目标理解块元素和行内元素理解框模型掌握框模型的样式属性掌握定位属性掌握浮动属性掌握显示和隐藏属性◆内容1 块元素和行内元素块元素和行内元素的转换HTML常见的块元素和行内元素2框模型网页中的框框的特点框的样式属性3 定位4 浮动5 清除浮动6 显示和隐藏1 块元素和行内元素网页中的元素分为块元素和行内元素。
块元素成块状显示，独占行；行内元素不占满行，多个行内元素可在一行上显示。
块元素内能容纳其他的块元素和行内元素，行内元素内只能容纳行内元素。
◆块元素和行内元素的转换使用display（显示）属性，当设置标签的display属性值为block时，标签就呈块元素显示，当设置标签的display属性值为inline时，标签就呈行内元素显示。
一个网页就是大型的方框，里面包含着一大堆小方框。
◆网页中的框：块元素都是框（行内元素不是框，行内元素的高，宽都不能改变）。
框具有外边距、边框、、内边距和内容内容（content）：包含文字、图片、flash动画、应用程序、视频等内边距（padding）：内容和边框之间的距离边框（border）：盒的边界外边距（margin）：2个盒之间的空白，透明我们可以看到框模型的4个面：顶部（top）、右侧（right）、底部（bottom）和左侧（left）◆框的特点(1) 外边距和内边距只有宽度属性(2) 边框有大小和颜色之分，可以对每一条边框设置不同的样式(3) width和height定义的是内容的宽度和高度，而不是整个框的宽度和高度◆框的样式属性1内容的属性：widthheight2padding属性padding属性设置对象四边的内边距如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
（顺时针）如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下不允许负值设置对象四边的外边距检索或设置对象四边的外延边距。
css中四种定位的使用方法CSS中的四种定位方法是：静态定位、相对定位、绝对定位和固定定位。
每种定位方法都有其独特的特点和应用场景。
本文将详细介绍这四种定位方法的使用方法和效果。
一、静态定位（Static Positioning）静态定位是CSS中元素的默认定位方式，元素按照HTML文档流的顺序进行排列，不受任何定位属性的影响。
在静态定位下，top、right、bottom和left属性无效。
静态定位适用于不需要特殊定位的元素，一般用于正常的文本和图片排列。
对于静态定位的元素，不需要设置定位属性，可以直接使用默认的静态定位。
二、相对定位（Relative Positioning）相对定位是相对于元素在正常文档流中的位置进行定位。
使用相对定位后，可以通过设置top、right、bottom和left属性来调整元素的位置。
相对定位不会影响其他元素的布局，其他元素仍然按照正常文档流排列。
相对定位适用于需要微调元素位置的情况，可以将元素相对于其正常位置进行上下左右的偏移。
可以通过设置正值或负值来调整元素的位置。
例如，设置top: 10px;可以将元素向下偏移10像素。
三、绝对定位（Absolute Positioning）绝对定位是相对于最近的已定位祖先元素或根元素进行定位。
使用绝对定位后，可以通过设置top、right、bottom和left属性来精确控制元素的位置。
绝对定位会脱离正常文档流，不会影响其他元素的布局。
绝对定位适用于需要精确定位元素的情况，可以将元素放置在页面的任意位置。
可以结合使用top、right、bottom和left属性来确定元素的位置。
例如，设置top: 50px; left: 100px;可以将元素向下偏移50像素，向右偏移100像素。
四、固定定位（Fixed Positioning）固定定位是相对于浏览器窗口进行定位。
使用固定定位后，元素会始终保持在窗口的固定位置，不会随页面滚动而移动。
DIV CSS position绝对定位absolute relative教程篇常常使用position用于层的绝对定位，比如我们让一个层位于一个层内具体什么位置，为即可使用position:absolute和position:relative实现。
一、position语法与结构position语法：position : static absolute relativeposition参数：static : 无特殊定位，对象遵循HTML定位规则absolute : 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。
而其层叠通过css z-index属性定义。
此时对象不具有边距，但仍有补白和边框relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置position说明：设置对象的定位方式，可以让布局层容易位置绝对定位，控制盒子对象更加准确。
二、position实际用处绝对定位position用于定位盒子对象，有时一个布局中几个小对象，不易用css padding、css margin进行相对定位，这个时候我们就可以使用绝对定位来轻松搞定。
特别是一个盒子里几个小盒子不规律的布局，这个时候我们使用position 绝对定位非常方便布局对象。
绝对定位position示范适用图、不规律布局，为即可利用position:absolute；position:relative进行绝对定位绝对定位与float浮动不能同时使用，比如一个大盒子里有的是绝对定位，有的是使用css float浮动定位，这样IE6浏览器将不会显示改大对象里的这些绝对定位与相对定位，这也算是IE6 CSS HACK吧，注意不要混用即可。
三、绝对定位使用条件position:absolute；position:relative绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位。
CSS之定位布局（position，定位布局技巧）1.什么是定位：css中的position属性，position有四个值：absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置⼀些不规则的布局，使⽤TLBR(top,left,bottom,right)来调整元素位置。
2.各个属性值的描述：static(静态) 没有特别的设定，遵循基本的定位规定，不能通过z-index进⾏层次分级，在普通流中，各个元素默认的属性。
relative(相对定位) 对象不可层叠、不脱离⽂档流，参考⾃⾝静态位置通过 top,bottom,left,right 定位。
absolute(绝对定位) 脱离⽂档流，通过 top,bottom,left,right 定位。
选取其最近⼀个最有定位设置的⽗级对象进⾏绝对定位，如果对象的⽗级没有设置定位属性，absolute元素将以body坐标原点进⾏定位。
fixed（固定定位）这⾥所固定的参照对像是可视窗⼝⽽并⾮是body或是⽗级元素。
使⽤了fixed的元素不会随着窗⼝的滚动⽽滚动。
属于absolute的⼦集。
3.各个属性值的具体作⽤：A.static：（静态，默认的属性）通常情况下都不会使⽤，但是会存在有些场景，就是你想把position的值从其他值修改成默认时使⽤。
B.relative：（相对定位）⼀个元素设定了position:relative，因为其不脱离⽂本流，如果不设置TLBR(top,left,bottom,right)的话，它的位置不会被改变，且不会影响当前布局，相当于没事发⽣⼀样。
如果设置了TLBR后，元素就可以向指定的⽅向偏移，但是他原有的位置还是占据着的，例⼦如图：图⼀：对child-1 设置了position：relative图⼆：再对child-1 调位置 top：20px left：20pxC.absolute: (绝对定位)，完全脱离⽂本流（普通流），原来的位置不再占有，且可以设置TLBR任意移动；特别说明⼀下，对元素设置了absolute后，其⽗级元素都没有设置position：absolute/relative/fixed其会以body为⽗级。
使用CSS定位元素实现水平垂直居中效果###一、CSS定位元素水平垂直居中CSS的定位技术可以实现元素的水平垂直居中显示。
主要利用position属性，定义元素的绝对定位、相对定位或固定定位（fixed），结合margin或transform两个属性，实现元素的水平垂直居中定位，使元素能够正中显示。
####1、使用绝对定位：```cssdivposition:absolute;left:50%;top:50%;transform:translate(-50%,-50%);```通过绝对定位，position定义了当前元素的定位方式，设置left:50%，top:50%的值，表示向左右和上下移动50%的距离，再结合transform:translate(-50%,-50%)的属性，表示元素移动相应的距离，使得当前元素的位置正好可以居中显示。
####2、使用相对定位：```cssdivposition:relative;margin:auto;```使用相对定位，position定义了当前元素的定位方式，通过margin设置auto值，表示元素的上下、左右的margin值都设置为auto，让浏览器自动计算margin值，使得元素正好水平居中显示，也可以设置both 值，让浏览器自动分配上下左右的margin值，从而达到居中的效果。
#### 3、使用flexbox配合margin实现垂直水平居中：```cssdivdisplay: flex;justify-content: center;align-items: center;margin: auto;```使用flexbox配合margin可以较为简单地实现元素的水平垂直居中，display设置flex，示当前元素使用弹性布局，justify-content定义了水平方向上的对齐方式，设置为center，示元素水平居中；align-items定义了垂直方向上的对齐方式，设置为center。
1 定位父对象底边<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>bottom</title><meta name="author" content="" /><meta name="copyright" content="" /><!--描述：检索或设置对象与其最近一个定位的父对象底边相关的位置。
必须定义position属性值为absolute、relative或fixed，此取值方可生效。
语法：bottom: <length> | <percentage> | auto默认值：auto取值：auto：无特殊定位，根据HTML定位规则在文档流中分配<length>：用长度值来定义距离底部的偏移量。
可以为负值。
<percentage>：用百分比来定义距离底部的偏移量。
可以为负值。
说明：--><style>body{background-color: deepskyblue;}.test{position:absolute;bottom:100px;width:200px;height:200px;padding:5px10px;background:#c00;color:#fff;line-height:12;}</style></head><body><div class="test">我将出现在浏览器底部</div></body></html>2 父对象左边<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>left</title><meta name="author" content="" /><meta name="copyright" content="" /><!--描述：检索或设置对象与其最近一个定位的父对象左边相关的位置。
必须定义position属性值为absolute、relative语法：left: <length> | <percentage> | auto默认值：auto取值：auto：无特殊定位，根据HTML定位规则在文档流中分配<length>：用长度值来定义距离左边的偏移量。
可以为负值。
<percentage>：用百分比来定义距离左边的偏移量。
可以为负值。
说明：--><style>body{background-color: deepskyblue;}.test{position:absolute;left:100px;width:200px;height:200px;padding:5px10px;background:#c00;color:#fff;line-height:12;}</style></head><body><div class="test">我将出现在浏览器左上角</div></body></html>3 检索对象定位方式<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>position</title><meta name="author" content="" /><meta name="copyright" content="" /><!--描述：检索对象的定位方式。
语法：position：static | relative | absolute | fixed 默认值：static取值：static：无特殊定位，对象遵循正常文档流。
top，right，bottom，left等属性不会被应用。
relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。
top,left:对象距离正常位置的偏移量；absolute：对象脱离正常文档流，使用top，right，bottom，left等属性以父容器进行绝对定位。
而其层叠通过z-index属性定义。
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
IE6及以下不支持此参数值说明：--><style>body{background-color: deepskyblue;}#staticPosition{position:static;top:80%;left:80%;width:200px;height:100px;background-color: black;color: white;line-height:2;}/*绝对定位*/#absolutePosition{position:absolute;top:600px;left:700px;width:200px;height:100px;background: red;line-height:2.4;}/*相对定位*/#relativePosition{position:relative;top:100px;left:100px;width:200px;height:100px;background: green;color: white;line-height:2.4;}#fixedPosition{position:fixed;top:400px;left:400px;width:200px;height:100px;background: blue;color: white;line-height:2.4;}</style></head><body><!--描述：绝对定位的父容器是根据离它最近的包含它的元素决定的。
--><div id="absolutePosition">水平垂直居中的对象,绝对定位absolute；</div><div id="staticPosition">静态定位static；</div><!—描述：根据自己的起始位置为参考点进行定位；--><div id="relativePosition">相对定位relative；</div><!--描述：固定定位的父对象永远是浏览器；忽略包含它的任何元素； --><div id="fixedPosition">固定定位fixed；</div> </body></html>4 定位父对象右边<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>right</title><meta name="author" content="" /><meta name="copyright" content="" /><!--时间：2016-06-30描述：检索或设置对象与其最近一个定位的父对象右边相关的位置。
必须定义position属性值为absolute、relative或fixed，此取值方可生效。
语法：right：<length> | <percentage> | auto默认值：auto取值：auto：无特殊定位，根据HTML定位规则在文档流中分配<length>：用长度值来定义距离右边的偏移量。
可以为负值。
<percentage>：用百分比来定义距离右边的偏移量。
可以为负值。
说明：--><style>body{background-color: deepskyblue;}.test{position:absolute;right:100px;width:200px;height:200px;padding:5px10px;background:#c00;color:#fff;line-height:12;}</style></head><body><div class="test">我将出现在浏览器右上角</div></body></html>5定位父对象顶部<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>top</title><meta name="author" content="" /><meta name="copyright" content="" /><!--描述：检索或设置对象与其最近一个定位的父对象顶部相关的位置。
