前端基础——css进阶（三）

关于定位，就是把某个对象固定再页面的特定地方，不管页面其他显示如何变化，都不会影响到该对象。

定位-position

书写语法	说明	文档流	偏移位置时候的参照物（top left right bottom）
position：static；	默认值	默认	默认
position：absolute；	绝对定位	脱离	没有父元素的时候，参照物是浏览器的第一屏；有父元素且父元素有定位的时候
position：relative；	相对定位	不脱离	自己的初始位置
position：fixed；	固定定位	脱离	浏览器的当前位置
position：sticky：	粘性定位
z-index：设置元素的层级，数值越大，层级越靠上

position：relative；

相对初始位置，下面的盒子仍然保持默认值，不会占用它原有的空间，但它会去占下面的空间。

.b{background-color: rgb(11, 3, 255);position: relative;top:100px;left: 100px;/* 单独设置定位也无效，需要同时设置宽高 */}

position：absolute；

脱离文档流，“与世无争”并且空出了初始位置，在其他元素设置的时候不会受到影响，也不会去影响到他们，默认优先（index）较高。会产生覆盖效果。

        .a{background-color: red;position: static;top: 100px;/* 在静态定位下设置宽高无效 */}.c{background-color: rgb(0, 255, 47);position: absolute;top: 100px;left: 100px; }

在有父元素的情况下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0px;margin: 0px;}.box{background-color: bisque;width: 500px;height: 500px;margin: auto;position: relative;top: 50px;}.a{background-color: brown;width: 200px;height: 200px;position: absolute;top: 50px;left: 50px;}</style>
</head>
<body><div class="box"><div class="a"></div></div>
</body>
</html>

position：fixed；

永远将此对象固定在浏览器第一屏的某一位值。不会随着屏幕的滚动而改变。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0px;margin: 0px;}.box{background-color: bisque;width: 100%;height: 15000px;margin: auto;position: relative;;}.a{background-color: brown;width: 200px;height: 200px;position: fixed;top: 50px;left: 50px;}</style>
</head>
<body><div class="box"></div><div class="a"></div>
</body>
</html>

position：sticky

粘性定位，当滚动到它的位置时，就会进行固定。

设置透明度

opacity：0-1；

让一个盒子在另一个盒子中居中

在给子元素相对父元素定位时，切记要给父元素设置相对定位，让子元素找到对齐目标,在子元素中的top，bottom，right，left是相对于父元素来说的的，前面带上margin-才是基于子元素的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0px;margin: 0px;}.box1{margin: 0 auto;width: 500px;height: 500px;background-color: bisque;position: relative;}.box2{width: 200px;height: 200px;background-color: aquamarine;position: absolute;top: 50%;left: 50%;/* 此时的top，left的比例是对于父盒子的大小而言的 */margin-top: -100px;margin-left: -100px;/* 此时（ margin-）的top，left的比例是对于自己的大小而言的 */}</style>
</head>
<body>
<div class="box1"><div class="box2"></div>
</div>
</body>
</html>

浮动和定位的区别

float：半脱离，可以让文字环绕。

absolute：全脱，不会出现环绕效果。

前端基础——css进阶（三）相关推荐

前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器二. 后代选择器.子元素选择器三. 兄弟选择器四. 交集选择器与并集选择器五. 序列选择器六. 属性选择器七. 伪类选择器八. 伪元素选择器九. CSS三大特性一. ...
前端基础——CSS布局
前端基础学习第三天文章目录前端基础学习第三天一.CSS布局 1.margin(外边距) 2.padding(内边距) 3.position 4.float 二.布局实例 1.浮动布局 2.弹性布 ...
11. 前端基础--CSS盒子定位
文章目录前端基础--CSS盒子定位 1. 再看CSS 布局的三种机制 2. 为什么使用定位? 3. 定位详解 3.1 边偏移 3.2 定位模式 (position) 静态定位(static) -了解 ...
前端笔记 | CSS进阶
一.CSS的复合选择器 1.1 复合选择器 CSS中根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合而成的. 复合选择器可以更准确.更高效的选 ...
前端基础CSS+html篇 2w字吐血总结
前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色.从狭义上讲,前端工程师使用 HTML.CSS.JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端.移动 ...
前端之CSS篇(三)——CSS三大特性及盒子模式和边距边框
1.CSS的三大特性 CSS有三个非常重要的三个特性:层叠性.继承性.优先性 1.1 层叠性相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式.层叠性主要解决样式冲突的问题. ...
三十六、前端基础 CSS
CSS相关一 CSS简介二 CSS选择器 2.1 基本选择器 2.2 组合选择器 2.3 属性选择器 2.4 分组与嵌套 2.5 伪类选择器 2.6 伪元素选择器 2.7 选择器优先级三字体样 ...
前端基础-CSS如何布局以及文档流，对于新手来说，特别有用
一. 网页布局方式 1.什么是网页布局方式布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式比如word,nodpad++等等而网页的布局方式指的就是浏览器这款工具是如何对网页中的 ...
前端基础到进阶（1）：HTML基础入门
今天要分享的内容是HTML的基础,但是我觉得有必要先聊一聊我们学习的这个东西是什么?软件是什么意思? what is 软件? 软件是与计算机系统操作有关的程序.规程.规则及任何与之有关的文档及数据的完 ...