P44-前端基础CSS-Position相对定位介绍

1.概述

定位可以辅助页面完成微调布局，当页面的整体布局框架搭建完成后，需要对每块元素做细微的调整，使用定位就是一个非常棒的方式。

2.相对定位案例

2.1.定位简介

定位（position）
定位是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置
使用position属性来设置定位
可选值：

static 默认值，元素是静止的没有开启定位

relative 开启元素的相对定位

absolute 开启元素的绝对定位

fixed 开启元素的固定定位

sticky 开启元素的粘滞定位

相对定位：
当元素的position属性值设置为relative时则开启了元素的相对定位
相对定位的特点：

1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化

2.相对定位是参照于元素在文档流中的位置进行定位的

3.相对定位会提升元素的层级

4.相对定位不会使元素脱离文档流

5.相对定位不会改变元素的性质块还是块，行内还是行内

偏移量（offset）
当元素开启了定位以后，可以通过偏移量来设置元素的位置
top

定位元素和定位位置上边的距离

bottom

定位元素和定位位置下边的距离

定位元素垂直方向的位置由top和bottom两个属性来控制
通常情况下我们只会使用其中一

top值越大，定位元素越向下移动

bottom值越大，定位元素越向上移动

left

定位元素和定位位置的左侧距离

right

定位元素和定位位置的右侧距离

定位元素水平方向的位置由left和right两个属性控制，通常情况下只会使用一个

left越大元素越靠右

right越大元素越靠左

2.2.没有开启定位前

没有开启定位的代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>定位的简介</title><style>body {font-size: 60px;}.box1 {width: 200px;height: 200px;background-color: #bda;}.box2 {width: 200px;height: 200px;background-color: #ccc;}.box3 {width: 200px;height: 200px;background-color: #daa;}</style>
</head><body><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div>
</body></html>

没有开启定位的效果展示

3.开启相对定位

3.1.在box2中开启相对定位

在box2中开启相对定位，box2开启相对定位以后，不设置偏移量元素不会发生任何的变化。
给box2设置偏移量调整box2的布局位置。

开启相对定位设置偏移量位置效果

4.开启相对定位完整代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>定位的简介</title><style>body {font-size: 60px;}.box1 {width: 200px;height: 200px;background-color: #bda;}.box2 {width: 200px;height: 200px;background-color: #ccc;/* 开启相对定位 */position: relative;/* 设置偏移量 */left: 100px;top: -200px;}.box3 {width: 200px;height: 200px;background-color: #daa;}</style>
</head><body><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div>
</body></html>

P44-前端基础CSS-Position相对定位介绍相关推荐

11. 前端基础--CSS盒子定位
文章目录前端基础--CSS盒子定位 1. 再看CSS 布局的三种机制 2. 为什么使用定位? 3. 定位详解 3.1 边偏移 3.2 定位模式 (position) 静态定位(static) -了解 ...
前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器二. 后代选择器.子元素选择器三. 兄弟选择器四. 交集选择器与并集选择器五. 序列选择器六. 属性选择器七. 伪类选择器八. 伪元素选择器九. CSS三大特性一. ...
前端基础CSS+html篇 2w字吐血总结
前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色.从狭义上讲,前端工程师使用 HTML.CSS.JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端.移动 ...
前端基础——CSS布局
前端基础学习第三天文章目录前端基础学习第三天一.CSS布局 1.margin(外边距) 2.padding(内边距) 3.position 4.float 二.布局实例 1.浮动布局 2.弹性布 ...
前端基础-CSS如何布局以及文档流，对于新手来说，特别有用
一. 网页布局方式 1.什么是网页布局方式布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式比如word,nodpad++等等而网页的布局方式指的就是浏览器这款工具是如何对网页中的 ...
2023高薪前端面试题（一、前端基础——css）
• 说一下 css 盒模型盒模型分为IE盒模型和W3C标准盒模型.盒子的宽度和高度的计算方式由box-sizing属性控制. box-sizing属性值 content-box:默认值,conten ...
Web前端基础---CSS样式--盒子模型--浮动与定位
Day02 CSS样式 DIV和CSS DIV是层叠样式表中的定位技术,全称DIVision,即为划分.有时可以称其为图层. DIV元素是用来为HTML文档内大块(block-level)的内容提供结 ...
html相对定位不占位置,CSS position 相对定位和绝对定位
一.position 的四个值:static.relative.absolute.fixed. 绝对定位:absolute 和 fixed 统称为绝对定位相对定位:relative 默认值:stat ...
小白IT：炫彩的网页是怎么做的，什么是前端？？？Python前端基础CSS 效果渲染
文章目录一认识HTML 1.web服务的本质 2.HTML是什么? 3.html文档格式 4.html标签格式标签的语法几个重要的属性 HTML注释二.常用标签 1.!DOCTYPE标签 2 ...
前端基础-CSS的属性相关设置
一字体属性二文本属性三背景属性四盒子模型五盒子模型各部分详解一. 字体属性 1.font-weight:文字粗细(表格中*为重点) 取值描述 normal 默认值,标准粗细 ...

P44-前端基础CSS-Position相对定位介绍

P44-前端基础CSS-Position相对定位介绍

1.概述

2.相对定位案例

2.1.定位简介

2.2.没有开启定位前

3.开启相对定位

3.1.在box2中开启相对定位

4.开启相对定位完整代码

P44-前端基础CSS-Position相对定位介绍相关推荐

最新文章

热门文章