文章目录

CSS的浮动
- 框1{float:none;}
- 框1{float:right;}
- 框1{float:left;}
- 框1、2、3{float:left;}
CSS的定位
浮动和定位的使用区别
CSS层叠等级

在一个网页中，默认情况下块级元素独占一行，是自上而下排列，行内元素自左向右排列，但是在实际的网页布局中往往需要改变这种单调的排列方式，使网页内容变得丰富多彩，CSS的浮动和定位完美的解决了这个问题。

CSS的浮动

CSS的浮动可以通过float属性进行设置，默认值为none（不浮动）。

框1{float:none;}

框1{float:right;}

框1{float:left;}

框1、2、3{float:left;}

CSS的定位

在网页开发中，如果需要网页中的某个元素在网页的特定位置出现，例如弹出菜单，这时可以通过CSS的position属性进行设置，示例如下：

position:relative;     /*相对定位方式*/
left:30px;               /*距左边线30px*/
top:10px;                /*距顶部边线10px*/

用于设置菜单定位方式的常用属性值如下表所示

用于设置元素具体位置的常用属性值如下表所示。

浮动和定位的使用区别

其实浮动的本意是用来解决图片和文字排版问题的，但是由于它十分好用，被大部分开发者应用到了网页布局，并成为了公认布局的一种方式。

该图中4个粉色部分使用浮动的知识对页面进行布局，然后使用绝对定位知识创建了一个浮动的div元素。
需要注意的是，position: absolute会导致元素脱离文档流，被定位的元素等于在文档中不占据任何位置，在另一个层呈现。
float也会导致元素脱离文档流，但还在文档或容器中占据位置，把文档流和其他float元素向左或向右挤，并可能导致换行。

CSS层叠等级

z-index层叠等级属性
当一个父元素中的多个子元素同时被定位，定位元素之间有可能会发生重叠。

显示器使用x轴和y轴来表示二维平面的位置属性，为了表示三维立体的概念，图中上下层的立体关系，引入了z-index属性来表示z轴的深度。

z-index值可以控制定位元素在垂直于显示屏方向（z轴）上的堆叠顺序，值大的元素发生重叠时会在值小的元素上面，其取值可为正整数、负整数和0，默认值为0。

注意： z-index只能在position属性值为relative或absolute或fixed的元素上有效，z轴可以理解为屏幕的深度，z-index值越大的元素越靠近用户。

CSS浮动、定位与z-index层叠等级详解——响应式Web系列学习笔记相关推荐

CSS盒子模型的使用及其注意事项——响应式Web系列学习笔记
CSS中的一个基本概念就是盒子模型,所谓盒子模型就是把HTML页面中的元素看作是一个矩形区域,即元素的盒子. 盒子由margin(外边距).border(边框).padding(内边距).conten ...
CSS常用选择器、伪元素选择器、伪类选择器大全——响应式Web系列学习笔记
1. 常用的CSS选择器 CSS选择器的作用就是从HTML页面中找出特定的某类元素.常用的几类CSS选择器如下表所示. 选择器代码示例代码说明通用选择器 * *{} 选择所有元素. 标签选择器 ...
HTML中引入CSS的三种方式——响应式Web系列学习笔记
1. 行内式行内式是通过标签的style属性来设置元素的样式,其基本语法格式如下. <标签名 style="属性1:属性值1;属性2:属性值2;">内容</标签 ...
css浮动后页面乱了怎样解决,详解浮动元素引起的问题和解决办法
一.问题多个浮动的元素无法撑开父元素的宽度,父元素的高度可能会变成0. 若浮动元素后面跟非浮动元素,非浮动元素会紧随其后浮动起来. 若浮动元素前面还有同级元素没有浮动则会影响页面结构. 二.解决办法 ...
html怎么添加积分系统,CSS动画实现领积分效果的思路详解
最近项目中要做一个领积分的效果,根据老板的描述,这个效果类似于支付宝蚂蚁森林里的领取能量.整体效果是就是在树周围飘着几个积分元素,上下滑动,类似星星闪烁,点击领取后,沿着树中心的位置滑动并消失,树上的 ...
php带旋转动画刷新页面,css旋转动画效果的简单实现示例详解
我们可以通过css来做出动画效果,下面我为大家演示的是p的旋转,颜色过渡的动画 a{ text-align:center; line-height:100px; transition:all 2s; ...
css学习12：过渡、变化、动画、响应式布局
元素的动效二十二.过渡 transition 在英文中是过渡的意思,过渡可以为一个元素在不同状态之间切换不同的过渡效果.它由四个部分构成,分别是:过渡属性的名称,过渡需要的时间,过渡的方式和过渡的延 ...
highlight.js css,JS库之Highlight.js的用法详解
下载到本地后,新建个页面测试 1.在head中加入css和js的引用 highlight hljs.initHighlightingOnLoad(); 2.添加对应要显示的内容 # 读取文件内容 de ...
HTML+CSS教程（十）css3(3D属性详解及动画)
一.3D 转换 1.左手坐标系 :伸出左手,让拇指和食指成"L"形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指,食指和中指分别代表X.Y.Z 轴的正方 ...

CSS浮动、定位与z-index层叠等级详解——响应式Web系列学习笔记