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 ...
随机推荐
- Liferay-Activiti 功能介绍 (新版Liferay7基本特性)
一句话简介 Liferay是世界领先的开源企业门户(也可作为综合门户),是最强大(没有之一)的JAVA开源门户,在Gartner和Forrester和评价非常高,近几年已经超越了微软门户Sharepo ...
- 关于a标签的onclick与href的执行顺序
onclick的事件被先执行,其次是href中定义的(页面跳转或者javascript), 同时存在两个定义的时候(onclick与href都定义了),如果想阻止href的动作,在onclick必须加 ...
- odoo开发笔记--与微信集成
odoo 与微信 https://github.com/JoneXiong/oejia_wx
- odoo开发环境搭建(四):python开发工具IDE pycharm配置
odoo开发环境搭建(四):python开发工具IDE pycharm配置
- Python numpy 中 keepdims 的含义
keepdims主要用于保持矩阵的二维特性 import numpy as np a = np.array([[1,2],[3,4]]) # 按行相加,并且保持其二维特性 print(np.sum(a ...
- Quartz.NET在ASP.NET 中使用
Quartz.NET 项目地址 http://quartznet.sourceforge.net/ common logging是一个通用日志接口,log4net是一个具体实现 ,也可以使用NLog, ...
- JSONPath解析
访问我的博客 前言 在工作中,经常会遇到从一串 JSON 中提取一个或多个字段的情况,常用的做法就是将其反序列化为 JSONObject 对象,然后从对象中获取,如果是 JSONArray 就进行迭代 ...
- PHP算法------排序
<?php/** * Created by PhpStorm. * User: 63448 * Date: 2018/5/5 * Time: 22:42 */$arr = [3,1,13,5,7 ...
- zoj 2744 Palindromes(计算回文子串个数的优化策略)
题目链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2744 题目描述: A regular palindrome i ...
- Struts2开发基础
Struts2开发基础 struts2采用拦截器的机制来处理用户的请求,使得业务逻辑控制器能够与ServletAPI完全脱离开. 1. Hello World! 配置web.xml <?xml ...