前端笔记----定位

一.定位分三种：相对定位，绝对定位和固定定位。

1.相对定位：元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移；

如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>定位</title><style>.box1{margin: 50px auto;border: 1px solid red;width: 100px;height: 100px;}.box2{width: 50px;;height: 50px;border: 1px solid green;background: blue;  position: relative; # 相对定位left: 50px;top: 50px;}</style>
</head>
<body><div class="box1"><div class="box2"></div></div>
</body>
</html>

定位前：　定位后：

2.绝对定位：元素脱离文档流，不占据位置，漂浮在文档流的上方，相对于父级元素进行定位；

前提是父级元素设置了定位，一般是设置相对定位；如果找不到就会相对于body进行定位，相当于固定定位。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>定位</title><style>.box1{margin: 50px auto;border: 1px solid red;width: 100px;height: 100px;position: relative; # 父元素设置了定位}.box2{width: 50px;;height: 50px;border: 1px solid green;background: blue;position: absolute;  # 子元素设置相对定位left: 50px;top: 50px;}</style>
</head>
<body><div class="box1"><div class="box2"></div></div>
</body>
</html>

结果：　　

3.固定定位：元素脱离文档流，不占据文档流的位置，漂浮在文档流的上方，其相对于浏览器窗口进行定位。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>定位</title><style>.box1{margin: 50px auto;border: 1px solid red;width: 100px;height: 100px;}.box2{width: 50px;;height: 50px;border: 1px solid green;background: blue; position: fixed;  # 固定定位left: 50px;top: 50px;
}</style>
</head>
<body><div class="box1"><div class="box2"></div></div>
</body>
</html>

　　结果：box2相对于窗口定位。

转载于:https://www.cnblogs.com/cwp-bg/p/7594575.html

前端笔记----定位相关推荐

计算机图形学Web前端笔记-定位并移动到指定坐标点（two.js理论及实现）
这里先演示下效果笔记毕竟这是给理论及实践的博文. 当按下回车后会到场景600,600中画个圆并且浏览器会移动到场景600,600的位置,并且这个位置将会是圆心. 同样,滑动滚轮进行放缩后,还是能进行 ...
Pink老师前端笔记-CSS第七天
Pink老师前端笔记-CSS第六天 # day09-前端基础CSS第七天学习目标: 能够使用精灵图能够使用字体图标能够写出 CSS 三角能够写出常见的 CSS 用户界面样式 ...
Web前端笔记（三）
Web前端笔记记录(三) position定位 relative相对定位 absolute绝对定位脱离文档流使内联支持宽高使块元素默认宽根据内容决定(让块具备内联的特性) 如果有定位祖先元素相对 ...
Pink老师前端笔记-CSS第六天
Pink老师前端笔记-CSS第六天 # day08-前端基础CSS第六天今日目标能够说出为什么要用定位能够说出定位的 4 种分类能够说出 4 种定位各自的特点能够说出为什么常用子绝父相 ...
移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法
移动端前端笔记 - 遇到的常见JS与CSS问题及解决方法参考文章: (1)移动端前端笔记 - 遇到的常见JS与CSS问题及解决方法 (2)https://www.cnblogs.com/zhaoda ...
Web前端笔记（21-45）
Web前端笔记 (21-45) 21.嵌套列表 1.概念 2.有(无)序列表嵌套 3.定义列表嵌套 22.表格标签 1.种类 2.举例未加语义化标签添加语义化标签 23.表格属性 1.常见表格属 ...
Henry前端笔记之 Node及npm相关
Henry前端笔记之 npm入门相关 NodeJs 简介: 1.Nod简介与概述: 2.交互式运行环境:PEPL 3.Node.js模块和包 3.npm包管理工具 npm简介详见:https://dk ...
web前端position定位层:absolute+relative应用
web前端html定位层的特点: 完全脱离默认文档流,独立于立体层面的Z轴之上.和float浮动一样都脱离了默认文档流.但float元素与默认文档流之间会相互产生影响,而定位层元素则完全独立互不干扰. ...
1.前端笔记之html
title: 1.前端笔记之HTML date: 2016-04-04 23:21:52 tags: Python categories: Python --- 作者:刘耀出处:http://www ...

前端笔记----定位

前端笔记----定位相关推荐

最新文章

热门文章