css定位position

闲言碎语不多说，直接开写！

关于定位

我们可以使用css的position属性来设置元素定位类型，position的设置项如下：

　　a、relative生成相对定位元素，元素所占据的文档流的位置不变（即元素不会脱离文档流），元素本身相对文档流的位置进行偏移。（相对于自身的位置定位）

　　b、absolute生成绝对定位元素，元素脱离文档流，不占据文档流的位置，（元素会漂流我在文档流的上方），相对于上一个设置了相对定位或者绝对定位或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。（做绝对定位时一般会把父级元素设置为相对定位，把父级元素作为基点）

　　c、fixed生成固定定位元素，元素脱离文档流，不占据文档流的位置，相对于浏览器窗口进行定位。

　　d、static默认值，没有定位，元素出现在正常的文档流中，相对于取消定位属性或者不设置定位属性。

　　e、inherit从父级元素继承position属性值。

定位元素特性

绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素。（行内块元素不能使用margin:x auto来设置水平居中）

a、如果要使元素水平居中：left:50%;margin-left:-width/2

b、如果要使元素垂直居中：top:50%;margin-top:-height/2

定位元素的层级

定位元素是浮动的正常的文档流之上，可以用z-index属性来设置元素的层级。（z-index值越大，层级越高）

典型定位布局：

　　a、固定在顶部的菜单

　　b、水平垂直居中的弹框

　　c、固定的侧边的工具栏

　　d、固定在底部的按钮

a、固定在顶部的菜单（固定定位）

b、水平垂直居中的弹框（固定定位绝对定位）

c、固定的侧边的工具栏（固定定位）

d、固定在底部的按钮（固定定位）

css定位position相关推荐

CSS——CSS定位※ ( position )
文章目录定位(position) 为什么要用定位? 元素的定位属性静态定位(static) 相对定位relative(自恋型) 绝对定位absolute (拼爹型) 1.父级没有定位 2.父级有定 ...
前端基础入门之css定位 position
定位的简介需求分析按照我们之前所学知识,可以怎么实现呢? 应该来说不难,很容易实现 .box2 {width: 200px;height: 200px;background-color: yell ...
CSS定位position总结（超详细哦！）
文章目录前言一.定位(position) 介绍 1.为什么使用定位 2.定位组成二. 定位模式 (position) 1.边偏移(方位名词) 2.定位模式介绍 1.1 静态定位(static) ...
css 定位position详解,background注意事项哒哒哒 -----20181119
1.定位position:relative || absolute || fixed生成绝对定位的元素,相对于浏览器窗口进行定位.|| inherit (1)属性解释 ①````position ...
css绝对定位分层,css定位position引发的层级关系问题详解
position定位里的absolute,relative和fixed absolue:绝对定位,用top,bottom,left和right根据有定位的父级元素进行定位,如果无则相对body元素即整 ...
CSS定位—position：fixed
position:fixed 固定定位,被固定在浏览器的某个地方,被固定的元素不会随着滚动条的拖动而改变位置需要结合top.bottom.left.right四个维度来定位位置,如果没设置,则原来位 ...
CSS定位 position
position: 元素的定位方式,取值 staic.fixed.relative.absolute static:静态定位(默认状态.不定位) Fixed:固定定位 relative:相对定位 ab ...
css 定位position: absolute居中
这是个很小的点:只是为了方便使用 /*方式一*/ .main_center{position: absolute;left:0;right:0;top:0;bottom:0;margin:auto; ...
前端：CSS/12/display属性，overflow属性，cursor光标类型，CSS定位，综合案例：今日闪价
display属性功能:规定网页元素如何显示: 取值:none(隐藏),block(以块元素显示),inline(以行内元素显示): block:可以实现将行内元素转换为块元素: inline:可以 ...

css定位position

css定位position相关推荐

最新文章

热门文章