源代码部分：

（1）httm部分：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="Google Chrome">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box1">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
</div>
<div class="box2">
<div class="A">kyrie</div>
<div class="B"></div>
<div class="C"></div>
</div>
</body>
</html>
 
（2）CSS链接部分：
*{
margin: 0;
padding: 0;
}
.box1 div{
width: 150px;
height: 150px;
background-color: rgb(0,100,200);
margin-right: 30px;
display: block;
text-align: center;
font-size: 30px;
line-height: 150px;
}
.two{
position: relative;
left: 10px;
top: 10px;
}
.box1 .three{
position: absolute;
left: 100px;
background-color:rgb(194, 173, 176);
z-index: 77;
opacity: .6;
}
.box2{
height: 400px;
position: relative;
}
.A{
position: sticky;
height: 100px;
width: 100px;
top: 100px;
background-color: rgb(18, 18, 200);
}
.B{
position: sticky;
height: 100px;
width: 100px;
top: 50px;
opacity: .8;
background-color: rgb(118, 219, 211);
}
.C{
position: sticky;
height: 100px;
width: 100px;
top: 50px;
opacity: .10;
background-color: rgb(150,120,170);
}
body{
background-color:red;
}
 
 
 
此次学习的Position（位置）是CSS中的一个确定位置的属性。通过各种Position：relative、absolute、sticky、static等形式语法来控制位置的变化。其中static元素根据文档的正常流程定位，是个默认值；而relative则元件根据文档的正常流动定位，然后偏移相对于它本身的基础上的值top，right，bottom，和left。偏移量不会影响任何其他元素的位置; absolute元素将从普通文档流中删除，并且不会为页面布局中的元素创建空间。sticky元件根据文档的正常流动定位，然后偏移相对于它的最近的祖先滚动和包含块（最接近的块级祖先）。最后有一个fixed值元素将从普通文档流中删除，并且不会为页面布局中的元素创建空间。它相对于所述初始位置包含块通过所建立的视口。
各种定位之间存在一定的关联，相对定位、绝对定位、固定定位、粘性定位。各种定位用于不同要求中，各有各的好处。相对定位的元素从文档中的正常位置偏移给定量，但没有偏移影响其他元素。 绝对定位的元素从流动中取出; 因此，其他元素的位置就好像它不存在一样。绝对定位的元素相对于其最近定位的祖先（即，不是最近的祖先static）定位。 固定定位类似于绝对定位，所不同的是该元素的包含块是通过所建立的含初始块视口中。 粘性定位可以被认为是相对定位和固定定位的混合。粘性定位的元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定的，直到它到达其父母的边界。

3 week work—Position的更多相关文章

  1. CSS Position 定位属性

    本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...

  2. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  3. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  4. position:sticky的兼容性尝试

    开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后, ...

  5. css知多少（11）——position

    1. 引言 本文将用一篇文章介绍position(定位),在学习position之前,我们应该去思考一个问题:什么情况下我们需要定位?如果没有定位将无法满足我们怎样的需求?我们要知道,被人类创造出来的 ...

  6. Android之RecyclerView的原生Bug-Inconsistency detected. Invalid view holder adapter positionViewHolder{a1bbfa3 position=2 id=-1, oldPos=-1, pLpos:-1 no parent}

    今天在运行自己编写的App时,突然发现App在运行时闪退,然后就查看了Android Studio的Log,发现了这个错误,上网查了一下,才知道是RecyclerView的原生Bug,在数据更新时会出 ...

  7. 函数：MySQL中字符串匹配函数LOCATE和POSITION使用方法

    1. 用法一 LOCATE(substr,str) POSITION(substr IN str) 函数返回子串substr在字符串str中第一次出现的位置.如果子串substr在str中不存在,返回 ...

  8. CSS:position:fixed使用(转)

    position属性规定元素的定位类型,即建立元素布局所用的定位机制.任何元素都可以定位,不过绝对定位或固定定位元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认 ...

  9. position导致Safari工具栏不自动隐藏

    一般情况下,移动端网页在上滑的时候,Safari的工具栏会自动隐藏掉,下滑的时候又会出现. 但是,如果可滑动区域的最外层box写了position:absolute,就不会自动隐藏了. 例如像这样的页 ...

  10. 元素堆叠问题、z-index、position

    多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...

随机推荐

  1. 游戏中转盘概率的算法---python实现

    加入转盘的内容及概率如下 转盘倍数 0.5 0.6 0.7 0.8 1 1.2 1.5 1.8 2 机率 0.2 0.15 0.15 0.2 0.2 0.1 0.1 0.05 0.05 下面来实现转盘 ...

  2. Maven CXF wsdl2Java List<Xxx>生成ArrayOfXxx包装对象 解决方法

    添加-xjc-Xxew解决,同时还要给插件添加相应的jar包,如下: <plugin> <groupId>org.apache.cxf</groupId> < ...

  3. 37.Spring-事务控制.md

    目录 1.分类 2.Spring对jadc事务管理 2.1xml方式 2.1.1首先定义Dao对象和Server对象 2.1.2配置文件实现事务管理 2.2注解方式 2.2.1对象类 2.2.2配置文 ...

  4. 洛谷P1169 棋盘制作(悬线法)

    题目链接:https://www.luogu.org/problemnew/show/P1169 #include<bits/stdc++.h> #define fi first #def ...

  5. 云笔记项目-笔记列表弹出"分享移动删除"子菜单

    业务需求: 笔记列表里还有一个按钮可以弹出子菜单,要求做到以下几点: (1)点击选中的笔记行的弹出按钮后,弹出子菜单,再次点击,子菜单收回. (2)选中其他笔记后,子菜单消失.效果如下图所示: 业务分 ...

  6. Pandas数据的去重，替换和离散化，异常值的检测

    数据转换 移除重复数据 import pandas as pd import numpy as np from pandas import Series data = pd.DataFrame( {' ...

  7. socketserver 模块并发

    socketserver是将socket封装的类. 实例: 服务端: import socketserver class Myserver(socketserver.BaseRequestHandle ...

  8. NTFS(Windows)、ext4(RHEL6)和xfs(RHEL7)文件系统的误删除恢复和备份

    前言 对于误删除文件的设备,要马上停止任何写的操作,防止删除的文件被覆盖,导致数据丢失! 恢复NTFS文件系统下误删的文件 以Windows为例,市面上能恢复的工具不少,例如EasyRecovery. ...

  9. linux环境启动数据库

    1.查看数据库监听的状态: 监听状态:lsnrctl status  出现如下列截图所示数据,说明切切换账户有问题:切换账户时要家:-:  如 su - oracle 第一步:打开Oracle监听$ ...

  10. flex布局实现elment容器布局

    一.flex布局是什么 flex布局,意为"弹性布局",是一种响应式的布局方法 采用 Flex 布局的元素,称为 Flex 容器,它的所有子元素自动成为容器成员. 先放上一个ele ...