定位：

可选值：

开启绝对定位

定位：

是一种布局的手段，而且是一种高级的布局手段，

你可以将任何元素，摆放在页面的任意位置

可以用position来设置定位

可选值：

static 默认值，不开启定位

以下四种定位方式，都属于开启定位

relative 相对定位

absolute 绝对定位

fixed 固定定位

sticky 粘滞定位（兼容性略差）

开启绝对定位

position: absolute;

绝对定位后的特点

1、设置绝对定位后，元素会脱离文档流

2、设置绝对定位后，元素的性质就会发生变化，就不会再区分块还是行内了

3、设置绝对定位后，如果不设置偏移量，元素的位置也不会发生变化

4、绝对定位，它的原点是相对于其包含块来定位的

5、设置绝对定位后，元素的层级也会提高

注意：一般情况下，为了更好的控制子元素的位置，

我们会在开启子元素的绝对定位后，会同步开启父元素的相对定位

这叫"子绝父相"

-->

<!-- 包含块

1、默认情况（没有定位的情况下），包含块就是元素的祖先元素

2、如果是定位的情况下，包含块就是元素的开启了定位的，离它最近的祖先元素

如果祖先元素都没有开启定位，则包含块就是根标签（html）

当元素的position属性设置fixed时，则开启了元素的固定定位

（1）用于固定在浏览器页面上，不随浏览器的滚动而改变位置；

（2）以浏览器为参照物，和父元素没有任何关系；

　（3）固定定位不占有原来的位置，即脱离标准流，更改元素的性质

(4)应用场景

- 固定导航

- 固定侧边栏

- 广告

面试题：

设置透明有几种方式？能说一说他们之间的区别？

1、opacity是属性，rgba、transparent是属性值

2、rgba、transparent是属性值，他必须要跟在特定的属性后，

例如 background-color、color、border-color等

3、opacity是属性，它有继承性,给祖先元素设置，会继承给它的后代元素

相当于在元素前面放一层玻璃，整个元素都是朦朦胧胧的

rgba、transparent是没有继承的，给谁设置，谁就有

北大青鸟培训第四周第一天：HTML和CSS相关知识【定位】（持续更新）相关推荐

北大青鸟培训第四天：HTML和CSS相关知识（持续更新）
目录属性选择器伪类选择器元素的伪类属性选择器 1.[属性名]{} 2. [属性名=属性值]{} 3.[属性名^=属性值]{} 4. [属性名$=属性值]{} 5.[属性名*=属性值]{} 1. ...
北大青鸟培训第三天：HTML和CSS相关知识（持续更新）
音视频 audio src controls loop autoplay audio标签用来向页面中引入一个外部的音频文件 src 指向音频的引入路径 controls 控制是否允许用户点击播放,默 ...
北大青鸟培训第五天：HTML和CSS相关知识（持续更新）
继承:继承是一种规则,它允许样式不仅应用于某个特定html标签元素,还可应用于其后代元素.CSS继承是指设置父级的CSS样式,父级及以下的子级元素都具有此属性.CSS继承的作用:给父元素设置一些属性, ...
北大青鸟培训第二天：HTML初级代码和相关知识（持续更新）
HTML常用标签 <blockquote> </blockquote> <q> </q> <br> <center> </ ...
北大青鸟培训第第二周第一天：HTML和CSS相关知识（持续更新）
目录 display 长度单位 1.像素 px 2.百分比 % 3.em 4.rem 颜色的单位 css RGB 3.RGBA 4.十六进制 5:HSL值 HSLA值字体的样式 color : ...
北大青鸟培训第三周第一天：HTML和CSS相关知识（持续更新）接着昨天的盒子模型
目录垂直布局 1.兄弟元素 2.父子元素解决方案内联元素的盒子 1.内容区: 2.内边距 3.边框: 4.外边距盒子的大小浮动简介垂直布局默认情况下,块元素宽高是被内容撑开的,如果自定义 ...
北大青鸟培训第二周第二天：HTML和CSS相关知识（持续更新）
目录行间距 1.行高 (line height):文字占有的实际高度 2.单行文本在父元素中垂直居中 3.font 中也可以指定行高 font:bold italic 25px/3 s ...
北大青鸟培训第二周第三天：HTML和CSS相关知识（持续更新）
目录盒子模型举例子 1.内容区(content) 举例子盒子模型边框边框(border)元素设置边框盒子模型内边距盒子模型 1.网页中所有的元素都可以看成一个盒子,由 content + ...
北大青鸟培训第一天：HTML初级代码介绍和相关知识（持续更新）
代码解释 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...

北大青鸟培训第四周第一天：HTML和CSS相关知识【定位】（持续更新）

定位：

可选值：

开启绝对定位

<!-- 包含块

面试题：

北大青鸟培训第四周第一天：HTML和CSS相关知识【定位】（持续更新）相关推荐

最新文章

热门文章

北大青鸟培训第四周第一天：HTML和CSS相关知识 【定位】（持续更新）

定位：

可选值：

开启绝对定位

<!-- 包含块

面试题：

北大青鸟培训第四周第一天：HTML和CSS相关知识 【定位】（持续更新）相关推荐

最新文章

热门文章

北大青鸟培训第四周第一天：HTML和CSS相关知识【定位】（持续更新）

北大青鸟培训第四周第一天：HTML和CSS相关知识【定位】（持续更新）相关推荐