一、CSS定位

CSS 定位属性允许对元素进行定位改变其在页面的位置。
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
普通流中的元素的位置由元素在 HTML 中的位置决定。

二、相对定位

相对于自身的定位。

<style>/* 相对定位 相对自身定位通常配合绝对定位使用*/.box{position: relative;}

三、绝对定位

相对于浏览器窗口的定位。
如果父盒子给定位属性，那就相对于这个父盒子定位。
逐级向上找，相对碰到的第一个有定位属性的父级盒子，如果没有那就相对浏览器定位。
子绝父相：
为了让绝对定位有定位点有定位点，一般会给他的父盒子加相对定位。

<style>/* 绝对定位 1.相对浏览器窗口定位2.父级有定位属性时，相对父级盒子定位3.逐级往上找，相对碰到的第一个有定位属性的父盒子定位，如果没有，就相对浏览器定位*//* 子绝父相为了让绝对定位有定位点，一般会给他的父盒子加相对定位*//* z-index设置堆叠顺序的1.默认是z-index：12.数字越大越靠前显示3.数字越小比如负数越靠后显示            */.div1{position: relative;top: 0;left: 0;}.div2{width: 200px;height: 200px;background-color: pink;position: relative;top: 0;left: 0;}</style>

四、固定定位

相对于浏览器窗口定位，浏览器不随页面的滚动改变定位。

固定定位：不管页面如何滚动，他都永远固定在那里
固定定位的用途：“返回顶部”、“楼层导航”

 <style>.box1{height: 10000px;}.box2{/* 固定定位相对于浏览器窗口定位，不随页面滚动改变位置*/position: relative;right: 40px;bottom: 40px;width: 60px;height: 300px;background-color: pink;}</style>

五、粘性定位

(这是 css3 新增的属性值)粘性定位。最初会被当作是relative，相对于原来的位置进行偏移；
一旦超过一定阈值之后，会被当成 fixed定位，相对于视口进行定位position:sticky ，其支持还不是很普遍。

相对于原来的位置进行偏移。

<style>.box2{/* 粘性定位偏移量同相对定位页面滚动时，滚动到顶部，直接吸顶*/position: sticky;top: 100px;left: 0;}.box6{width: 10px;height: 100000px;}</style>
</head>
<body><div class="box1">111</div><div class="box2">222</div><div class="box1">333</div><div class="box1">444</div><div class="box1">555</div><div class="box6">666</div>
</body>

CSS---------定位相关推荐

python-selenum3 第五天定位——不常用定位与css定位详
使用tag来定位 tag定位的是标签,不常用例如:百度的输入框标签是input 最终会报错,因为百度首页input标签太多了 driver = webdriver.Firefox(executabl ...
CSS 定位 (Positioning)
CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多 ...
css位置布局,CSS定位布局相关
本文档包括CSS的样式定位框模型如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动.当文档滚动到超过图像的位置时,图像就会消失. 您可以通过 background-p_w_upload ...
css定位页面元素,页面元素定位-CSS元素基本定位
基本定位 """属性定位一 """ # #通过id # driver.find_element_by_css_selector(" ...
CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动; display: inline-block; 有些时候可以替代float实现相同的效果. positio ...
CSS定位（postion）和移动(float)
5.定位和移动: Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和 ...
1、CSS 定位 (Positioning)
position 属性指定了元素的定位类型. CSS 定位属性属性描述 position 把元素放置到一个静态的.相对的.绝对的.或固定的位置中. top 定义了一个定位元素的上外边距边界与其包含 ...
Selenium自动化中DOM，XPATH，CSS定位Web页面对象的优劣性分析
加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...
css 定位连线_CSS Position(定位)
CSS Position(定位) CSS position属性用来指定元素如何在页面上定位,CSS Position(定位)的方式有以下几种:静态定位(static),绝对定位(absolute),相 ...
java基础57 css样式、选择器和css定位（网页知识）
本文知识点(目录): 1.CSS样式 2.选择器 3.CSS定位 1.CSS样式 1.html 在一个网页中负责的是一个页面的结构 2.css(层叠样式表)在一个页面中负责了一 ...

CSS---------定位

一、CSS定位

二、相对定位

三、绝对定位

四、固定定位

五、粘性定位

CSS---------定位相关推荐

最新文章

热门文章