前端学习笔记--CSS布局--层定位
1.层定位概述:

z-index:前后叠加顺序


2.position属性:

3.fixed:



2.relative:

移动后:

static没有往上移动占据box1的位置。
3.absolute:

移动后:

static往上移,占据box1的位置。
4.relative:

box1相对于static 定位。
5.absolute:
初始位置:

absolute相对于absolute移动后:


移动后:

6.一般设计方式:

案例:

区别:

前端学习笔记--CSS布局--层定位的更多相关文章
- 前端学习笔记--CSS布局--float定位
1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性 案例: 一列三行布局: <!DOCTYPE html> <ht ...
- 前端学习笔记--CSS布局--文件流定位
1.概述 2.文档流定位:从上到下,从左到右 代码: <!DOCTYPE html> <html lang="en"> <head> <m ...
- web前端学习笔记(CSS盒子的定位)
相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它. 使用relat ...
- 前端学习笔记--CSS布局--盒子模型
1.概述: 2.盒子模型 overflow属性: border属性: 1.padding属性: margin:
- web前端学习笔记(CSS变化宽度布局)
一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按 ...
- web前端学习笔记(CSS固定宽度布局)
一.单列布局: 这是最简单的一种布局方式,之所以给出该示例,还是为了保证本篇博客的完整性. <html xmlns="http://www.w3.org/1999/xhtml" ...
- HTML 学习笔记 CSS样式(定位)
CSS定位(Positioning)属性 允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性 可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...
- 前端学习笔记--css案例
要实现的案例: 1.分析布局 2.划分文件结构: 3.编写css代码 * { padding: 0; margin: 0; } body { font-size: 16px; color: burly ...
- 前端学习(20)~css布局(十三)
常见的布局属性 (1)display 确定元素的显示类型: block:块级元素. inline:行内元素. inline-block:对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以 ...
随机推荐
- C#中Stack集合
Stact<T>集合 特点:后进先出,简单来说就是就是新添加的元素都放到第一位,而且顺序移除元素也是从第一位开始移除. 三个方法: Push(T value);//添加一个值到集合顶部位置 ...
- @Component, @Service, @Controller, @Repository区别
@Component, @Service, @Controller, @Repository是spring注解,注解后可以被spring框架所扫描并注入到spring容器来进行管理 @Componen ...
- Java后台+数据库+Java web前端——记账本
下面是本人实现的网页版(设计思路见上一篇https://www.cnblogs.com/sengzhao666/p/10445984.html) 代码如下: 运行截图: 首页: 创建: 账本删除:(先 ...
- spring cloud hystrix dashboard 没有/actuator/hystrix.stream路径解决
首先我用的是spring boot Greenwich.SR2 在测试hystrix-dashboard监控服务时,发现访问localhost:9001/actuator/hystrix.stream ...
- C# 原子操作理解
C#内置提供的原子操作 Interlocked.Increment:以原子操作的形式递增指定变量的值并存储结果. Interlocked.Decrement:以原子操作的形式递减指定变量的值并存储结果 ...
- mysql 8.0 group by 不对的问题
select version(),@@sql_mode;SET sql_mode=(SELECT REPLACE(@@sql_mode,'ONLY_FULL_GROUP_BY',''));
- .net core EF Core 视图的应用
由之前的一篇文章<.net core Entity Framework 与 EF Core>我们都已经知道 EF Core 增加了许多特性,并且性能上也有了很大的提升. 但是EF Core ...
- 状态(State)模式--设计模式
定义与特点 1.1 定义 状态模式允许一个对象在其内部状态改变的时候改变其行为.这个对象看上去就像是改变了它的类一样. 1.2 特点 状态模式优点: 封装了转换规则,并枚举可能的状态,它将所有与某个状 ...
- Windows Form父子两个窗体之间的传值测试
1:先看测试的效果图: 2:全部的代码 using System; using System.Windows.Forms; namespace WindowsForms { public partia ...
- Python - 函数 - 第十四天
Python 函数 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但你也 ...