CSS中的三种常用定位
一、相对定位(position:relative)
如果想让一个元素在本来的位置进行一个位移,可以将该元素的定位设置为relative,同时指定相对位移(利用top,bottom,left,right).需要注意的是,元素仍然在文档流中,占据着它本来的位置空间.
二、绝对定位(position:absolute)
想让一个元素在文档中的指定位置,可以使用absolute来定位,将该元素的position设置为absolute,同时使用top,bottom,left,right来定位.绝对定位的元素位置是相对于距离它最近的那个已定位的父级(相对/绝对)元素决定的.如果没有父级元素,则根据body来进行定位,与相对定位相反,绝对定位不占据空间,从文档流中删除.
三、固定定位(position:fixed)
固定定位使用fixed属性,它会相对于整个文档定位,我们可以轻松的让一个元素定位在浏览器的左上,右上等方位.比如说想让一个div固定在右上方,使用以下代码
.odiv{ position:fixed; top:2%; right:2%;}
CSS中的三种常用定位的更多相关文章
- css中的大小、定位、轮廓相关属性
css中的大小.定位.轮廓相关属性 1.通过height.width属性控制组件大小 height:高度,可以设置任何有效的距离值: width:宽度,可以设置任何有效的属性值: max-height ...
- CSS中的浮动和定位
在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...
- css中的position(定位)
一.position语法与结构 position语法: position : static absolute relative position参数:static : 无特殊定位,对象遵循HTML定位 ...
- 打开input输入的时候,css中position:absolute/fixed定位的时候,定位元素上移问题解决
1.异常代码 <style> .box{ min-height: 100vh; width: 100%; position: relative; } .position{ position ...
- css中的浮动与定位
传送门:https://www.cnblogs.com/junwuyao/p/7435257.html
- CSS中背景图片定位方法
转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...
- CSS中的定位与浮动
CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...
- (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...
- HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...
随机推荐
- JS数组去重的几种常见方法
JS数组去重的几种常见方法 一.简单的去重方法 // 最简单数组去重法 /* * 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */ ...
- linux 下NFS远程目录挂载
NFS 是Network File System的缩写,中文意思是网络文件系统.它的主要功能是通过网络(一般是局域网)让不同的主机系统之间可以共享文件或目录.NFS客户端(一般为应用服务器,例如web ...
- mac操作记录
1.mac'主目录地址' 类似我的电脑 点桌面空白处按shift+command+C, 双击Macintosh HD图标后就能看见system文件夹 2.做excel表格,下载Microsoft Of ...
- oracle RAC srvctl命令关闭节点实例的时候 不能正常执行
场景描述: [oracle@oracle01 admin]$ srvctl stop database -d oradb1 PRCD- : The resource for database ORAD ...
- git提交的问题
1. Pull is not possible because you have unmerged files.症状:pull的时候$ git pull Pull is not possible be ...
- Jenkins持久化集成使用
1.概述 Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作,功能包括: 持续的软件版本发布/测试项目 监控外部调用执行的工作 2.搭建 2.1环境准备 首先我们要准备搭建的环 ...
- tar 压缩解压
tar命令 tar可以为文件和目录创建档案.利用tar,用户可以为某一特定文件创建档案(备份文件),也可以在档案中改变文件, 或者向档案中加入新的文件.tar最初被用来在磁带上创建档案,现在,用户可 ...
- (转)第十一篇:springboot集成swagger2,构建优雅的Restful API
声明:本部分内容均转自于方志明博友的博客,因为本人很喜欢他的博客,所以一直在学习,转载仅是记录和分享,若也有喜欢的人的话,可以去他的博客首页看:http://blog.csdn.net/forezp/ ...
- POJ 2785 4 Values whose Sum is 0(暴力枚举的优化策略)
题目链接: https://cn.vjudge.net/problem/POJ-2785 The SUM problem can be formulated as follows: given fou ...
- [转]Magento Configurable Product
本文转自:https://docs.magento.com/m1/ce/user_guide/catalog/product-configurable.html A configurable prod ...