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)相对定位、绝对定位、固定定位的更多相关文章

  1. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

  2. 前端学习 -- Html&Css -- 相对定位 绝对定位 固定定位

    相对定位 - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素. - 通过position属性来设置元素的定位. -可选值: static:默认值,元素没有开启定位: rela ...

  3. CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...

  4. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  5. 【CSS】 CSS基础知识 属性和选择

    css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...

  6. 前端开发:css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  7. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

  8. (转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

  9. CSS基础知识01

    一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold;             正常用:norma ...

  10. Web学习篇之---css基础知识(一)

    css基础知识(一) 1.css样式: 载入css样式有下面四种: 1).外部样式 2).内部样式 3).行内样式 4).导入样式 <link href="layout.css&quo ...

随机推荐

  1. 如何用WebGPU流畅渲染千万级2D物体:基于光追管线

    大家好~我们已经实现了百万级2D物体的流畅渲染,不过是基于计算管线实现的.本文在它的基础上,改为基于光追管线实现,主要进行了CPU和GPU端内存的优化,成功地将渲染的2D物体数量由4百万提高到了2千万 ...

  2. 手把手教你springboot集成微信支付

    20220727 最近要做一个微信小程序,需要微信支付,所以研究了下怎么在 java 上集成微信支付功能,特此记录下. 本文完整代码:点击跳转 准备工作 小程序开通微信支付 首先需要在微信支付的官网点 ...

  3. DOM及DOM相关操作

    DOM 概述: DOM 全称(document object model)文档对象模型(文档指定为对应html文档),对应的DOM就是操作HTML文档的(增删改查) DOM结构 document 文档 ...

  4. 关于python如何引用excel文件

    关于python如何引用excel文件 import pandas as pd #引用pandas库,as:将pandas简写为pd Nowcoder = pd.read_excel("1. ...

  5. 054_末晨曦Vue技术_处理边界情况之组件之间的循环引用

    组件之间的循环引用 点击打开视频讲解更详细 假设你需要构建一个文件目录树,像访达或资源管理器那样的.你可能有一个 <tree-folder> 组件,模板是这样的: <p> &l ...

  6. B/S结构通信系统原理

    本文介绍JavaWeb的B/S结构通信原理 概念:        Javaweb中B/S架构是一种系统架构形式,这里的B是Browser(浏览器),S是Server(服务器),是一种系统的架构形式,有 ...

  7. 如何使用CSS伪类选择器

    总览 CSS选择器允许你通过类型.属性.位于HTML文档中的位置来选择元素.本教程阐述了三个新选项:is().:where()和:has(). 选择器通常在样式表中使用.下面的示例会找到所有<p ...

  8. JavaScript 设计模式及代码实现——代理模式

    代理模式 1 定义 为其他对象提供一种代理以控制对这个对象的访问 在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用. 2 应用举例 2.1 缓 ...

  9. SpringMVC 06: 日期类型的变量的注入和显示

    日期处理和日期显示 日期处理 此时SpringMVC的项目配置和SpringMVC博客集中(指SpringMVC 02)配置相同 日期处理分为单个日期处理和类中全局日期处理 单个日期处理: 使用@Da ...

  10. 面试突击82:SpringBoot 中如何操作事务?

    在 Spring Boot 中操作事务有两种方式:编程式事务或声明式事务,接下来我们一起来看二者的具体实现. 1.编程式事务 在 Spring Boot 中实现编程式事务又有两种实现方法: 使用 Tr ...