一、固定定位应用场景

1.练习

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D158_ExerciseOfLocation</title>

    <style>

        *{

            padding:0;

            margin:0;

        }

        .nav{

            width: 100%;

            height: 45px;

            background-color: red;

            background:url("image/play_tennis.jpg");

             position:fixed;/*复习了固定定位，这个导航条就会固定到浏览器中不会随网页滚动而滚动了，兵器也脱脱离的标准流*/

        }

        .content{

            width: 100%;

            height: 2500px;

            background-color: yellow;

            background:url("image/laptop.jpg");

        }

        .backup{

            width: 50px;

            /*height: 50px;*/

            background-color: red;

            position:fixed;

            right: 10px;

            bottom:10px;

            text-align: center;

            text-decoration: none;/*去掉下面的线*/

            line-height: 50px;/*行高可以撑起盒子的高度*/

        }

</style>

</head>

<body>

<div class="nav"></div>

<div class="content"></div>

<div class="backup"><a href="#">返回</a></div>

</body>

</html>

​注意：IE6不支持固定定位，​谷歌浏览器支持。

二、定位流-z-index属性

1.什么是z-index属性？

默认情况下所有的元素都一个默认的z-index属性，取值为0，z-index属性的作用是准们用于控制定位流元素的覆盖关系的

2.默认情况下定位流的元素会盖住标准流的元素。

3.默认情况下定位流的元素后面编写的会盖住前面编写的​。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D159_z-indexAttribute</title>

    <style>

        *{

            padding:0px;

            margin:0px;

        }

        div{

            width: 100px;

            height: 100px;

        }

        .box1{

            background-color: red;

            position:fixed;

        }

        .box2{

            background-color: yellow;

            /*position:relative;*/

        }

        .box3{

            background-color: blue;

        }

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

</body>

</html>

​释义：红色的块盖住了黄色的块，原因符合第2条

        .box2{

            background-color: yellow;

            position:relative;

        }

​释义：黄色的块盖住了红色的块，原因符合第三条

4.使用z-index属性来规定这个​标签的优先级。如果定位流的元素设置了z-index属性，那么谁的z-index​属性比较大，谁就显示在上面。

        .box1{

            background-color: red;

            position:fixed;

            z-index: 1;

        }

        .box2{

            background-color: yellow;

            position:relative;

        }

​释义：这样就打破那个规则了，可以自动义​进行排序。

​注意点：

​从父元素入手：

（1）如果两个元素的父元素都没有设置z-index，那么谁的z-index属性比较大的谁就显示在上面；

（2）如果两个元素的父元素都设置了z-index属性，那么谁的父元素z-index属性​比较大，那么谁就显示在上面。子元素的z-index​就失效了。

三、源码：

D158_ExerciseOfLocation.html

D159_z-indexAttribute.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/D158_ExerciseOfLocation.html

https://github.com/ruigege66/HTML_learning/blob/master/D159_z-indexAttribute.html

2.CSDN：https://blog.csdn.net/weixin_44630050

3.博客园：https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包

HTML连载62-固定定位练习、z-index属性的更多相关文章

  1. HTML连载61-焦点图、固定定位

    一.焦点图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. 实现 DIV 固定定位在网页主体部分最右侧

    position:fixed 相对于窗口的固定定位,这个窗口可理解为可视窗口,除了浏览器自己的东西,剩下的就是这个可视窗口.而大部分的网页都是窄屏设计,比如说网页主体部分固定宽 1200px,或者自适 ...

  3. 移动端底部fixed固定定位输入框ios下不兼容

    简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的. 尝试过网上说的很多方法, ...

  4. HTML四种定位-固定定位

    固定定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=&q ...

  5. 理解CSS相对定位和固定定位

    × 目录 [1]相对定位 [2]固定定位 前面的话 一般地,说起定位元素是指position不为static的元素,包括relative.absolute和fixed.前面已经详细介绍过absolut ...

  6. position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  7. 解决ie6下不支持fix属性，模拟固定定位

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  8. Bootstrap 固定定位（Affix）

    来自:慕课网 http://www.imooc.com/code/5396 Affix 效果常见的有以下三种: ☑ 顶部固定 ☑ 侧边栏固定 ☑ 底部固定 固定定位--声明式触发固定定位 Affix ...

  9. input固定定位后，当input框获取到焦点时，会离开手机软键盘的解决方法

    前些天做页面时候遇到这样一个问题,将input框用position:fixed固定定位在最底部的时候,当Input获取焦点的时候,input框离开了手机软键盘,而不是吸附在软键盘上,效果如下图: 找了 ...

随机推荐

  1. Html介绍,标签的语法

    1.标签由英文"<"和">"括起来组成,如<html>就是一个标签2.html中的标签一般都是成对成对出现的,分为开始标签和结束标签.结 ...

  2. LAMP环境搭建+配置虚拟域名

    Centos下PHP,Apache,Mysql 的安装 安装Apache yum -y install httpd systemctl start httpd 添加防火墙 firewall-cmd - ...

  3. [更新ing]zzy的家里蹲网课日记

    前言 精神小(ge)伙(zi)终于记起了他的博客密码...... 寒假以来,积累了巨多的好想法想要写博客,往往都是因为各种原因半途而废--在学习生活上甚至也有各种拖延的毛病:爱欠作业不早睡,不见成绩不 ...

  4. day 8 函数编程_byets

    定义 bytes类型是指一堆字节的集合,在python中以b开头的字符串都是bytes类型 b'\xe5\xb0\x8f\xe7\x8c\xbf\xe5\x9c\x88' #b开头的都代表是bytes ...

  5. 【46】谷歌 Inception 网络简介Inception(2)

    Inception 网络(Inception network) 在上节笔记中,你已经见到了所有的Inception网络基础模块.在本节笔记中,我们将学习如何将这些模块组合起来,构筑你自己的Incept ...

  6. cf1041E

    题意:要求你构造一棵树,树中每一个节点都有一个编号(互不相同),告诉你删除掉每一条边之后的两个联通分量中节点标号的最大值,要求你输出这颗树,不存在就输出NO 题解:可以发现这颗树实际上是一个序列,我们 ...

  7. 数据库中间件DBLE学习(一) 基础介绍和快速搭建

    dble基本架构简介 dble是上海爱可生信息技术股份有限公司基于mysql的高可用扩展性的分布式中间件.江湖人送外号MyCat Plus.开源地址 我们首先来看架构图,外部应用通过NIO/AIO进行 ...

  8. linux 文件系统管理三部曲之三：挂载文件系统

    linux 文件系统管理三部曲之一:磁盘分区 linux 文件系统管理三部曲之二:创建文件系统 上面说明了,硬盘的划分和格式化,那么怎么使用,还没说,这里说一下,怎么使用创建好的文件系统. 使用文件系 ...

  9. dubbo的使用

    dubbo现在用的也不多,基本都在用spring cloud那一套,所以不详细写这个dubbo了. 1.zookeeper的安装 2.demo示例 我们需要把提供者注册到dubbo注册中心,消费者去订 ...

  10. CodeForces - 1105D 多源搜索

    #include<bits/stdc++.h> using namespace std; typedef long long ll; struct node{ int x,y; ll se ...