写给后端的前端笔记:定位(position)
来源:互联网 发布:基尼系数统计学算法 编辑:程序博客网 时间:2024/05/19 04:55
写给后端的前端笔记:定位(position)
既然都写了一篇浮动布局,干脆把定位(position)也写了,这样后端基本上能学会css布局了。
类别
我们所说的定位position
主要有三类:固定定位fixed
,相对定位relative
,绝对定位absolute
。它们都有相同的四个属性:top
,bottom
,left
,right
区别
主要在于他们的参照物不一样
<div class="block" id="div1">固定定位bottom: 40px;<br>right: 40px;</div><div class="block" id="div2">相对于浏览器窗口的绝对定位<br>top: 20px;<br>right: 20px;</div><div class="block" id="div3">相对定位 <div class="block" id="div4">相对于父元素的绝对定位<br>right: 10px;<br>top: 20px;</div></div><div class="block" id="div5">相对定位</div>
.block{ width: 100px; height: 100px;}
固定定位
固定定位的参照物是浏览器窗口,很多窗口广告就是用的固定定位,无论你怎么滚动或者放大缩小窗口,永远固定在浏览器窗口某个角落。
修改top
,bottom
,left
,right
的值可以调整元素在浏览器窗口的位置。
#div1{ position: fixed; bottom: 40px; right: 40px; background: red;}
绝对定位
绝对定位的参照物是该元素上一级的拥有position:relative
属性的父元素,如果该元素的上一级父元素没有设置相对定位,那么该元素的参照物就会变成当前页面。
修改top
,bottom
,left
,right
的值可以调整元素在父元素内的位置。
#div2{ position: absolute; top: 20px; right: 20px; background: green;}
#div3{ position: relative; width: 300px; height: 300px; background: blue;}#div4{ position: absolute; right: 10px; top: 20px; background: yellow;}
相对定位
相对定位的参照物是该元素本来的位置。
修改top
,bottom
,left
,right
的值可以让元素相对于原来的位置上下左右移动。
#div5{ position: relative; top: -20px; right: -100px; background: grey;}
阅读全文
0 0
- 写给后端的前端笔记:定位(position)
- 写给后端的前端笔记:浮动(float)布局
- CSS学习笔记-position定位(九)
- 写给刚入门的前端工程师的前后端交互指南
- 写给刚入门的前端工程师的前后端交互指南
- 前端 后端的基本 交互(后端 scala)(一)
- 前端 后端的基本 交互(后端 scala)(二)
- 从零开始前端学习[19]:前端中重要的属性,定位position属性
- css中定位的问题(position)
- css的position定位
- 定位position的详解
- CSS的position定位
- css的定位position
- position定位的解说
- (转)写给后端程序员的HTTP缓存原理介绍
- CSS定位(position)
- css定位(position)
- 讲给Android程序员看的前端教程(21)——position定位
- UVA 1601 The Morning after Halloween (优化BFS)
- 挑战程序竞赛系列(48):4.2 推理与动态规划算法(1)
- App内嵌入群聊功能: 1. 需要在IOS、Android、WEB IM、PC进行即时消息IM通讯,消息能实时收发,群管理 /群内消息。IM系统需要在不侵入原APP的用户和业务体系的情况下
- C++ string的万能转换,从long string 之间的转换来看看
- 直播延迟相关的知识
- 写给后端的前端笔记:定位(position)
- vue常用过滤器
- Spark官方文档翻译:Quick Start
- HDOJ HDU 1022 Train Problem I
- hy
- 序列化二叉树
- CodeForces
- 算法学习——并查集
- LeetCode 53. Maximum Subarray