对于position定位的认识

开发工具与关键技术：html+css
作者： 李伙
撰写时间： 2019年2月18日

position属性控制页面上元素间的位置关系，也就是排版。首先，我们先了解position的各个属性值：
⑴static：页面元素默认的定位。
⑵relative(相对定位)：相对于自己现在的位置（默认的位置）进行定位。可以用top,right,bottom,left.属性来改变它的位置。多数情况下用top和left就可以了。效果如下：

⑶absolute(绝对定位)：可以用top,right,bottom,left.属性来改变它的位置。多数情况下用top和left就可以了。absolute绝对定位的定位点在浏览器的左上角。效果如下：

也可以用relative和absolute配合使用来改变我们的定位点。效果如下：

⑷fixed(固定定位)：可以用top,right,bottom,left.属性来改变它的位置。多数情况下用top和left就可以了。效果如下：

如图所示：无论鼠标怎么移动橙色的盒子都会固定在同一个位置上。

对于position定位的认识相关推荐

元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问 ...
浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
css - Position定位属性与层级关系
今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过测试后果然有趣,有待深入研究: 1 <!DOCTYPE html> 2 <html> 3 ...
Bootstrap4+MySQL前后端综合实训-Day01-PM【position定位的四种方式、Flex布局语法教程及案例(概念、容器属性、项目属性)、双飞翼布局复习、Bootstrap4 教程】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录 HTML中的三种元素(块元素.内联元素.内联块元素) position定位的四种方式 ...
css 定位连线_CSS Position(定位)
CSS Position(定位) CSS position属性用来指定元素如何在页面上定位,CSS Position(定位)的方式有以下几种:静态定位(static),绝对定位(absolute),相 ...
(转)浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
教你玩转CSS Position(定位)
目录 CSS Position(定位) static 定位 fixed 定位 relative 定位 absolute 定位 sticky 定位重叠的元素所有的CSS定位属性
position定位——让人又爱又恨的属性
关于css中的position这个属性,在使用的时候,有时很强大,有时又让人很无奈. 强大的时候,对于div中的一些小物件不方便使用margin或者padding的时候,给与position:abso ...
关于position定位下的各种属性说明!-softbar
在这里详细讲解一下,希望能让更多的新手理解能够合理去理解position定位! 代码如下: .box2:"我"一直没有找到依靠.所以"我"会停靠在浏览器的左上方 ...
Position定位
Position定位 CSS中position属性是比较常用的元素定位方案,position常用的取值有static.relative.absolute.fixed.sticky.inherit. s ...

对于position定位的认识

对于position定位的认识相关推荐

最新文章

热门文章