CSS之定位（定位/相对定位）

定位/相对定位：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>定位/相对定位</title><style>body{font-size: 60px;}.box1{width: 200px;height: 200px;background-color: #bfa;}.box2{width: 200px;height: 200px;background-color: orange;/*定位（position）-定位是一种更加高级的布局手段-通过定位可以将元素摆放到页面的任意位置-使用position属性来设置定位可选值：static 默认值 元素是静止的，没有开启定位relative 开启元素的相对定位absolute 开启元素的绝对定位fixed 开启元素的固定定位sticky 开启元素的粘性定位-相对定位：当元素的position属性值设置为relative时则开启了元素的相对定位-相对定位的特点：1、元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化2、相对定位是参照于元素在文档流中的位置进行定位的3、相对定位会提升元素的层级4、相对定位不会使元素脱离文档流5、相对定位不会改变元素的性质，是块还是块，行内还是行内-偏移量（offset）-当元素开启定位以后，可以通过偏移量来设置元素的位置top-定位元素和定位位置上边的距离bottom-定位元素和定位位置下边的距离-定位元素垂直方向的位置由top和bottom两个属性来控制通常情况下我们只会使用其中一个-top值越大，定位元素越向下left-定位元素和定位位置的左侧距离right-定位元素和定位位置的右侧距离-定位元素水平方向的位置由left和right两个属性来控制*/position: relative;top: -200px;left: 200px;}.box3{width: 200px;height: 200px;background-color: yellow;}</style></head><body><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></body>
</html>

CSS之定位（定位/相对定位）相关推荐

[css] 说说你对相对定位、绝对定位、固定定位的理解
[css] 说说你对相对定位.绝对定位.固定定位的理解 position 属性指定了元素的定位类型.position 属性的五个值:static(默认值) relative(相对定位) fixed(固 ...
CSS 元素的定位之相对定位 position: relative
在CSS中,通过 position属性来对元素进行定位,可选的定位类型有 static | relative | absolute | fixed,默认值为 static,表示没有定位,元素保持在它原 ...
【CSS】定位--静态定位-相对定位-绝对定位-子绝父相-固定定位-粘性定位
文章目录 1. 为什么需要 2. 定位组成定位 = 定位模式 + 边偏移 2.1 定位模式 2.2边偏移 3. 静态定位 static (了解) 4. 相对定位 relative (重要) 5. 绝 ...
CSS中固定定位、相对定位、绝对定位以及flex布局高效定位
CSS中固定定位.相对定位.绝对定位以及flex布局高效定位一.固定布局将元素固定到一个位置,不管屏幕怎样移动,元素的位置不移动. <style>body {height: 3000p ...
css/html 定位绝对定位/相对定位
布局:文档流,margin,浮动,定位···· 定位:一种高级的布局的方式.你可以将任何的元素,放在页面任意的位置学习定位:如何开启,开启后特点 position样式名, 可选值: static 默 ...
css定位（相对定位和绝对定位）
文章目录前言一.定位是什么? 二.如何开启定位 1.相对定位 2.绝对定位总结前言随着前端课程的学习,我们从浮动来到了定位,同样都是布局所需要用到的方法,那么有什么区别呢?设置定位又有什么要 ...
CSS元素的定位（相对定位、绝对定位、固定定位、粘滞定位）
目录元素的定位相对定位绝对定位固定定位粘滞定位绝对定位的布局元素的定位相对定位当元素的position属性值设置为relative时则开启了元素的相对定位. 相对定位的特点: 1.元 ...
CSS 详细解读定位属性 position 以及参数
Css 详细解读定位属性 position 以及参数 position 定位属性,是CSS中非常重要的属性.除了文档流布局,就是定位布局了.本来我对这个问题没有放在心上,毕竟写了这么多年的css,对p ...
html列表无序嵌套,HTML/CSS - 如何正确定位这些嵌套的无序列表？
我寻找一些帮助解决与定位包含在其中具有相对定位一个div以下无序列表元素有一个问题IM:HTML/CSS - 如何正确定位这些嵌套的无序列表? 的UL的HTML结构: Your name Your e ...
CSS基础(part14)--定位
学习笔记,仅供参考,有错必纠参考自:pink老师学习笔记文章目录定位 CSS 布局的三种机制定位详解边偏移定位模式 (position) 静态定位(static) 相对定位(relativ ...

CSS之定位（定位/相对定位）

定位/相对定位：

CSS之定位（定位/相对定位）相关推荐

最新文章

热门文章