CSS定位 position

position:

元素的定位方式，取值 staic、fixed、relative、absolute
static：静态定位（默认状态。不定位）
Fixed：固定定位
relative：相对定位
absolute：绝对定位

定位方式要与定位属性配合使用

定位坐标：指定定位的元素，便宜目标元素多元的距离
left：定位元素，距离目标元素左边的距离
top：定位元素，距离目标元素上边的距离
right：定位元素，距离目标元素右边的距离
bottom：定位元素，距离目标元素下边的距离

1、固定定位，position：fixed

固定定位，是相对浏览器窗口进行的定位。
固定定位，不占空间，层级要高于普通元素，它不会随网页的滚动而滚动
如果不指定定位坐标的话，固定定位元素的位置在原地不动
固定定位元素，一定是“块元素”，不管原来他是什么元素。
一般就是网页固定的广告位置

2、相对定位，position：relative；

相对定位，是相对于“原来的自己”进行定位
相对定位，依然占空间，层级要高于普通元素
如果不指定定位坐标的话，相对定位元素的位置在原地不动
相对定位，原来是行内元素，定位后还是行内元素；原来是快元素，定位后还是块元素。

相对定位和绝对定位一般情况下是配合使用。

3、绝对定位，position：absolute

相对于祖先定位元素（相对定位，绝对定位），来进行的定位。
- 如果他的父元素没有进行任何定位的话，再往上找定位元素。
- 如果一直找到<body>都没有找到定位元素的话，那就相对于<body>来进行定位
绝对定位元素，不占空间，层级要高于普通元素。
绝对定位元素是一个“块元素”。

自己使用的时候一定要注意，把绝对定位和相对定位结合使用，要想相对于父元素进行绝对定位的话，就把父元素的定位设成相对定位。

转载于:https://www.cnblogs.com/ZHP-Study-share/p/8279018.html

CSS定位 position相关推荐

css定位position
闲言碎语不多说,直接开写! 关于定位我们可以使用css的position属性来设置元素定位类型,position的设置项如下: a.relative生成相对定位元素,元素所占据的文档流的位置不变(即 ...
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: 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相关推荐

最新文章

热门文章