HTML+CSS基础知识（5）相对定位、绝对定位、固定定位
1、相对定位
1.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相对定位</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
position: relative;
left: 150px;
top:200px;
}
/*
定位：
将指定的元素放到指定的位置
通过position属性来设置元素的定位
可选值：
static:默认值，元素没有开启定位
relative:相对定位 1、 相对的是自身的位置 2、相对位置的元素不会脱离文档流。
3、移动前的位置还会保留 4、会让元素提高一个层级，会遮盖另外一元素
absolute：绝对定位
fixed:固定定位
可通过left right top bottom 四个属性设置元素的偏移量
*/
.box3{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<!-- div.box$*3 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
1.2 测试结果
2、绝对定位
2.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
/* 绝对定位：
1、会让元素脱离文档流
2、如果不设置偏移量，元素的位置不发生变化
3、相对于离他最近的开启了定位的祖先元素进行定位的。
如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
4、提升一个层级
5、改变元素的性质，行内元素变成块元素，块元素的高度和宽度都被内容打开
*/
position: absolute;
left: 400px;
}
.box3{
width: 400px;
height: 400px;
background-color: yellow;
position: relative;
}
.box4{
width: 200px;
height: 200px;
background-color: plum;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3">
<div class="box4"></div>
</div>
</body>
</html>
2.2 测试
3、固定定位
3.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定定位</title>
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
/*
固定定位：
也是一种绝对定位，大部分特点和绝对定位一样
不同的是：
固定定位永远都会相对于浏览器窗口进行定位
固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
*/
position: fixed;
left:0px;
top:0px;
}
.box3 {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<!-- div.box$*3 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
3.2 测试结果
HTML+CSS基础知识（5）相对定位、绝对定位、固定定位的更多相关文章
- 前端CSS - 相对定位,绝对定位,固定定位
前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...
- 前端学习 -- Html&Css -- 相对定位 绝对定位 固定定位
相对定位 - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素. - 通过position属性来设置元素的定位. -可选值: static:默认值,元素没有开启定位: rela ...
- CSS基础知识之position
最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
- 【CSS】 CSS基础知识 属性和选择
css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- CSS基础知识之float
前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...
- (转)第一天 XHTML CSS基础知识 文章出处：标准之路(http://www.aa25.cn/div_css/902.shtml)
欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...
- CSS基础知识01
一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold; 正常用:norma ...
- Web学习篇之---css基础知识（一）
css基础知识(一) 1.css样式: 载入css样式有下面四种: 1).外部样式 2).内部样式 3).行内样式 4).导入样式 <link href="layout.css&quo ...
随机推荐
- Flask像Jenkins一样构建自动化测试任务
flask这个框架很轻量,做一些小工具还是可以很快上手的. 1.自动化 某一天你入职了一家高大上的科技公司,开心的做着软件测试的工作,每天点点点,下班就走,晚上陪女朋友玩王者,生活很惬意. 但是美好时 ...
- 解决zlibrary注册后,再次登录提示密码错误的问题
很多小伙伴注册后,再登录提示电子邮件或密码错误,但是可以确认账号密码都是正确的,这种应该怎么处理呢? 其实这种问题有两种处理方式, 首先使用 https://find.looks.wang/ 检测可以 ...
- LeetCode 593. 有效的正方形（向量做法）
题目 题目链接:593. 有效的正方形 题意:给出二维平面上四个点的坐标,判断这四个点是否能构成一个正方形,四个点的输入顺序不做任何保证. 思路 通过向量运算可以很轻松地解决这道题.任取一点向其他三点 ...
- DECIMAL 数据处理原理浅析
注:本文分析内容基于 MySQL 8.0 版本 文章开始前先复习一下官方文档关于 DECIMAL 类型的一些介绍: The declaration syntax for a DECIMAL colum ...
- JZM 的印象笔记 （卷积，分块）
题面 题目背景 大名鼎鼎的 OI 天花板选手 JZM 对自己的好伙伴--印象笔记有些生疏了 题目描述 作为一名 OI 选手,他的笔记中的字母只包含数字0和1. JZM 在印象笔记中找到了一行 N N ...
- 「题解报告」P2154 虔诚的墓主人
P2154 虔诚的墓主人 题解 原题传送门 题意 在 \(n\times m\) 一个方格上给你 \(w\) 个点,求方格里每个点正上下左右各选 \(k\) 个点的方案数. \(1 \le N, M ...
- 用metasploit映射公网远程控制舍友电脑
用metasploit映射公网远程控制舍友电脑 Metasploit是一款开源的安全漏洞检测工具,可以帮助安全和IT专业人士识别安全性问题,验证漏洞的缓解措施,并管理专家驱动的安全性进行评估,提供真正 ...
- gin如何多次shoubind一个请求参数
gin多次绑定请求参数 package main import ( "fmt" "net/http" "time" "github ...
- 后缀自动机（SAM）+广义后缀自动机（GSA）
经过一顿操作之后竟然疑似没退役0 0 你是XCPC选手吗?我觉得我是! 稍微补一点之前丢给队友的知识吧,除了数论以外都可以看看,为Dhaka和新队伍做点准备... 不错的零基础教程见 IO WIKI ...
- LFS（Linux From Scratch）构建过程全记录（五）：交叉工具链的构建
写在前面 本文将详细讲述如何构建工具链 前置知识 在LFS-BOOK中,我们需要学习一些关于"交叉编译"的内容,详见书本 安装Binutils-2.39 我们cd到sources文 ...