前端学习笔记--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:对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以 ...
随机推荐
- 【BZOJ5457】城市(线段树合并)
点此看题面 大致题意: 一棵树上每个点有颜色\(a_i\)和权值\(b_i\),求以每个点为根的子树内权值和最大的颜色及其权值和. 线段树合并 这是一道线段树合并板子题. (关于线段树合并,可参考我的 ...
- VMware虚拟机安装Centos7后设置静态ip
VMware虚拟机安装Centos7后设置静态ip 1. 先设置虚拟机的网络,打开虚拟网络编辑器: 2. 选择Vm8 234都要勾选 3. 打开NAT设置,看到123,待会要用. 4. 打开虚拟机服务 ...
- Java实现输出“杨辉三角”
import java.util.Scanner; public class SumTrangles { public static void func(int n) { if (n < 0) ...
- 【Java并发专题之二】Java线程基础
使用线程更好的提高资源利用率,但也会带来上下文切换的消耗,频繁的内核态和用户态的切换消耗,如果代码设计不好,可能弊大于利. 一.线程 进程是分配资源的最小单位,线程是程序执行的最小单位:线程是依附于进 ...
- Docker学习4-学会如何让容器开机自启服务
前言 小龙亲测重启服务器后 docker 容器没跑起来,相信有不少小伙伴在用docker部署容器的时候也发现每次开机服务就没有自启了,需要手动去执行把容器服务开启起来,但有没有可以让它开机自启呢?显然 ...
- 【VSFTP服务】vsftpd文件传输协议
vsftpd文件传输协议 系统环境:CentOS Linux release 7.6.1810 (Core) 一.简介 FTP(文件传输协议)全称是:Very Secure FTP Server. ...
- DDR基础知识
1.前言 DDR的全称为Double Data Rate SDRAM,也就是双倍速率的SDRAM,SDRAM在一个CLK周期传输一次数据,而DDR在一个CLK周期传输两次数据,分别在上升沿和下降沿各传 ...
- springboot2+shiro+jwt整合
参考:https://www.jianshu.com/p/ef0a82d471d2 https://www.jianshu.com/p/3c51832f1051 https://blog.csdn.n ...
- Python 线程池(小节)
Python 线程池(小节) from concurrent.futures import ThreadPoolExecutor,ProcessPoolExecutor import os,time, ...
- 创建vue3项目
最近准备做一个vue的小项目关于vue3的使用. 首先在vscode全局安装vue脚手架,npm i -g @vue/cli. 然后创建vue项目,vue create mydemo(项目名). 接下 ...