前端基础学习笔记定位

短命女 2022-04-13 04:10 254阅读 0赞

# 相对定位 #

CSS position属性用于指定一个元素在文档中的定位方式。

**top** ， **right** ， **bottom**  和  **left**  属性则决定了该元素的最终位置。

如下：未定位前的位置在定位后的位置**左面50px**。

.box1{
        position:relative;/*relative = 相对的意思*/
        left:50px;
    }

### 特性 ###

1.  **不使元素脱离文档流** 文档流：正常元素的流体布局，从上至下 这里有两种说法，一种占文档流自身的位置还在 一种不占文档流确实层级比较高 可以理解成占据自己的位置 同时提高了层级
2.  不影响元素本身特性，行内还是行内，块级还是块级
3.  层级未设置时，后来居上，后面设置的定位层级在上面。

# 绝对定位 #

相对于已经定位的父元素进行定位

### 特性 ###

1.  完全脱离文档流
2.  行内元素支持宽高
3.  块级元素内容撑开宽高，不会超过定位父级边界的临界点
4.  没有祖先元素则相对于body
5.  一般配合相对定位使用
6.  绝对定位的元素的位置相对于最近的已定位祖先元素
7.  margin:auto;失效

**如何使一个盒子在页面中百分之百居中呢？**

第一种方法，先让盒子50%移动，但不是居中，然后用margin再进行微调,-自己宽高的一半

第二种方法，margin当做和事老，距离四个边界一样的高度，但不建议用此骚操作。

/*第一种方法*/
    position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;
    /*第二种方法*/
    margin:auto;position:absolute;top:0;left:0;right:0;bottom:0;

# 固定定位 fixed #

position:fixed;

相对浏览器窗口定位

# z-index #

**层级只有定位元素才有**

1.  z-index 可以调换两个层的上下位置关系
2.  值可以为正，也可以为负，值越大，越在上面 默认值=0
3.  **只能同级元素对比** 你在大楼里面，你自己不能和大楼比谁高！
4.  z-index:只对定位的元素有效，其它元素均无效

发表评论取消回复

表情：

评论列表（有 0 条评论，254人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS基础——定位 (position)【学习笔记】

定位(position) 1. CSS 布局的三种机制 > 网页布局的核心 —— 就是用 CSS 来摆放盒子位置。 CSS 提供了 3 种机制来设置盒子的摆放位置

矫情吗；*/ 2022年12月23日 07:30/ 0 赞/ 304 阅读

相关 CSS 学习笔记 - 定位

CSS 学习笔记 - 定位定位类型偏移类型深度控制参考资料 [定位类型][Link 1] div {

墨蓝/ 2022年12月03日 13:14/ 0 赞/ 194 阅读

相关前端笔记（8）定位

css样式表/层叠样式表（6）定位定位模式静态定位（static）相对定位（relative）绝对定位（ab

妖狐艹你老母/ 2022年11月12日 09:43/ 0 赞/ 118 阅读

相关前端学习笔记(八)前端框架之vue基础

引言静态页面最初的网页以HTML为主，是纯静态网页，网页是只读的，信息流只能从服务端到客户端单项流通，开发人员也只关心页面的样式和显示内容。异步刷新

电玩女神/ 2022年11月09日 01:25/ 0 赞/ 270 阅读

相关网页前端DIV定位笔记

从以前的Table做框架到现在最新的div定位，过程确实不是很适应，总怕出现不少的页面混乱。在转型过程中学习了不少东西，与大家共勉： 1、怎么让div居中以前用Table

矫情吗；*/ 2022年05月22日 09:46/ 0 赞/ 230 阅读

相关前端基础学习笔记盒模型

边框线border border 边框：元素边框的样式单样式: border-width 大小 border-style 样式 border-co

太过爱你忘了你带给我的痛/ 2022年04月14日 03:29/ 0 赞/ 303 阅读

相关前端基础学习笔记定位

相对定位 CSS position属性用于指定一个元素在文档中的定位方式。 top ， right ， bottom 和 left 属性则决定了该元素的最终位置。

短命女/ 2022年04月13日 04:10/ 0 赞/ 255 阅读

相关前端基础学习笔记表单

定义定义了一个区域，可以和用户交互的区域，也可以用来向web服务器提交信息，一般用来做登陆注册搜索的功能。 form表单的属性： action ：一个处理

古城微笑少年丶/ 2022年04月12日 09:42/ 0 赞/ 273 阅读

相关前端基础学习笔记表格

表格在 CSS 创建之前， HTML <table> 元素常常被用于布局页面。这种用法在 HTML 4之后不被推荐使用，并且 <table>元素不应该被用于此目的

傷城~/ 2022年04月11日 02:50/ 0 赞/ 330 阅读

相关前端基础学习笔记弹性盒子模型

基本弹性盒模型演示 div{ display:flex; width:600px; border:1px soli

た入场券/ 2022年04月08日 12:14/ 0 赞/ 287 阅读