CSS 定位相关属性 :position
我们平时经常用margin来进行布局,但是遇到一些盒子不规律布局时,用margin就有点麻烦了,这个时候我们可以用position。
position:参数
参数分析: 一、absolute: 相对父元素进行定位,可以与其它盒子重叠,可以用z-index来设置重叠顺序。
二、relative:相对于其正常位置(正常文档流)进行定位,对象不可层叠。
三、fixed:相对于浏览器窗口进行定位。
四、inherit:从父元素继承 position 属性的值,需要注意的是任何的版本的 Internet Explorer 都不支持属性值 "inherit"。
五、static:默认值,没有定位。
用"left", "top", "right" 以及 "bottom" 进行位置偏移。
定位使用通常是父级定义position:relative定位,子级定义position:absolute绝对定位属性
注意:
一、同一对象position定位与float浮动不能同时使用。
二、left(左)和right(右)在一个对象只能选一种定义,bottom(下)和top(上)也是在一个对象只能选一种定义,好比一个人不能又高又矮一样。
但有一种情况例外,那就是在不指定高度的情况下,同时使用top和bottom的话,盒子将会铺满个整个页面
CSS 定位相关属性 :position的更多相关文章
- CSS定位的属性值
关于CSS定位都是老生常谈的问题了,不过有一个问题,最新的属性值在某些网站上并没有被更新到教程上 下面我记录一下 position现在有五个属性值 1.static:静态定位,没有特殊的定位规则,遵循 ...
- CSS基础 定位相关属性的使用方法
1.相对定位:position:relative: 属性名:position 属性值:relative: 特点:1.相对自己的位置移动 2.配合方位名词移动,如:top.left.right,bott ...
- CSS - 定位相关
定位 (position) 1. 相对定位 (relative) 相对于元素原来的位置进行移动 2. 绝对定位 (absolute) 如果父级元素中有相对定位属性, 则参照父级元素进行定位, 默认参照 ...
- 用CSS border相关属性画三角形
效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva2l3aV9jb2Rlcg==/font/5a6L5L2T/fontsize/400/fill/I0J ...
- CSS定位相关
CSS display:inline和float:left两者区别 ①display:inline:任何不是块级元素的可见元素都是内联元素.其表现的特性是“行布局”形式!(行布局:其表现形式始终以行进 ...
- CSS定位属性position相关介绍
position属性用来定义元素的定位方式. 定位相关属性值 1.static 默认值 2.absolute 绝对定位 3.fixed 固定定位 4.relative 相对定位 5.sticky 粘性 ...
- css中的大小、定位、轮廓相关属性
css中的大小.定位.轮廓相关属性 1.通过height.width属性控制组件大小 height:高度,可以设置任何有效的距离值: width:宽度,可以设置任何有效的属性值: max-height ...
- css样式之属性操作
一.文本属性 1.text-align:cnter 文本居中 2.line heigth 垂直居中 :行高,和高度对应 3.设置图片与文本的距离:vertical-align 4.text-decor ...
- HTML5学习笔记(八):CSS定位
CSS 定位 (Positioning) 属性允许你对元素进行定位. 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠.定位的基本思想很简单 ...
随机推荐
- lintcode-423-有效的括号序列
423-有效的括号序列 给定一个字符串所表示的括号序列,包含以下字符: '(', ')', '{', '}', '[' and ']', 判定是否是有效的括号序列. 样例 括号必须依照 "( ...
- OSG学习:阴影代码示例
效果图: 代码示例: #include <osgViewer/Viewer> #include <osg/Node> #include <osg/Geode> #i ...
- WPF和Expression Blend开发实例:Loading动画
今天来点实际的,项目中可以真实使用的,一个Loading的动画,最后封装成一个控件,可以直接使用在项目中,先上图: 整个设计比较简单,就是在界面上画18个Path,然后通过动画改变OpacityMas ...
- 【Leetcode】113Path Sum II
Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...
- 树形结构的数据库表Schema设计-基于左右值编码
树形结构的数据库表Schema设计 程序设计过程中,我们常常用树形结构来表征某些数据的关联关系,如企业上下级部门.栏目结构.商品分类等等,通常而言,这些树状结构需要借助于数据库完 成持久化.然而目前的 ...
- Java web 强制301跳转
response.setStatus(HttpServletResponse.SC_MOVED_PERMANENTLY); response.setHeader("Location" ...
- Luogu4927 梦美与线段树(线段树+概率期望)
每个节点被经过的概率即为该区间和/总区间和.那么所需要计算的东西就是每个节点的平方和了.修改对于某个节点的影响是使其增加2sum·l·x+l2x2.那么考虑对子树的影响,其中Σl2是定值,修改后Σsu ...
- jQuery多重事件绑定
1. <a> a标签默认绑定了一个onclick事件,当自己再写一个onclick事件的时候,默认自己写的那个优先执行. 如下程序,先执行(123),然后再发生跳转. <!DOCTY ...
- QT 基本图形绘制
QT 基本图形绘制 1.告诉绘制引擎一些东西 QPainter::Antialiasing 在可能的情况下,反锯齿 QPainter::TextAntialiasing 在可能的情况下,文 ...
- [BJWC2011]元素 线性基
题面 题面 题解 一个方案合法,当且仅当选取的01串凑不出0. 因此就是要使得选取的01串全在线性基内,具体原因可以看这道题:[CQOI2013]新Nim游戏 线性基 要使得魔力值最大,只需要按法力值 ...