我们平时经常用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的更多相关文章

  1. CSS定位的属性值

    关于CSS定位都是老生常谈的问题了,不过有一个问题,最新的属性值在某些网站上并没有被更新到教程上 下面我记录一下 position现在有五个属性值 1.static:静态定位,没有特殊的定位规则,遵循 ...

  2. CSS基础 定位相关属性的使用方法

    1.相对定位:position:relative: 属性名:position 属性值:relative: 特点:1.相对自己的位置移动 2.配合方位名词移动,如:top.left.right,bott ...

  3. CSS - 定位相关

    定位 (position) 1. 相对定位 (relative) 相对于元素原来的位置进行移动 2. 绝对定位 (absolute) 如果父级元素中有相对定位属性, 则参照父级元素进行定位, 默认参照 ...

  4. 用CSS border相关属性画三角形

    效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva2l3aV9jb2Rlcg==/font/5a6L5L2T/fontsize/400/fill/I0J ...

  5. CSS定位相关

    CSS display:inline和float:left两者区别 ①display:inline:任何不是块级元素的可见元素都是内联元素.其表现的特性是“行布局”形式!(行布局:其表现形式始终以行进 ...

  6. CSS定位属性position相关介绍

    position属性用来定义元素的定位方式. 定位相关属性值 1.static 默认值 2.absolute 绝对定位 3.fixed 固定定位 4.relative 相对定位 5.sticky 粘性 ...

  7. css中的大小、定位、轮廓相关属性

    css中的大小.定位.轮廓相关属性 1.通过height.width属性控制组件大小 height:高度,可以设置任何有效的距离值: width:宽度,可以设置任何有效的属性值: max-height ...

  8. css样式之属性操作

    一.文本属性 1.text-align:cnter 文本居中 2.line heigth 垂直居中 :行高,和高度对应 3.设置图片与文本的距离:vertical-align 4.text-decor ...

  9. HTML5学习笔记(八):CSS定位

    CSS 定位 (Positioning) 属性允许你对元素进行定位. 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠.定位的基本思想很简单 ...

随机推荐

  1. java沙盒入门

    程序员写一个Java程序,默认的情况下你可以访问任意的机器资源,比如读取,删除一些文件或者网络操作等.当你把程序部署到正式的服务器上,系统管理员要为服务器的安全承担责任,那么他可能不敢确定你的程序会不 ...

  2. 转 maven3常用命令、java项目搭建、web项目搭建详细图解

    转自地址:http://blog.csdn.net/edward0830ly/article/details/8748986 ------------------------------maven3常 ...

  3. IDEA配置Java Web项目

    IDEA部署maven tomcat的java web项目的关键配置:

  4. Bootstrap-tagsinput标系统使用心得

    最近工作中由于需求使用到了Bootstrap-tagsinput标系统,我的需求是: 1)能够从后台数据库获取标签信息展示到前端页面: 2)能够实现输入标签添加到后台,并ajax刷新页面: 3)能够实 ...

  5. 基于Git制作电子书 GitBook

    GitBook 详细介绍 GitBook 是一个基于 Node.js 的命令行工具,可使用 Github/Git 和 Markdown 来制作精美的电子书,GitBook 并非关于 Git 的教程. ...

  6. hdu 6400 Parentheses Matrix

    题目链接 Problem Description A parentheses matrix is a matrix where every element is either '(' or ')'. ...

  7. android面试(1)----布局

    1.说出android 五中布局,并说出各自作用? FrameLayout: 堆叠布局,也是就可以堆在一起.最长应用于Fragment的使用上. LinearLayout: 线性布局,可以是竖排或水平 ...

  8. shell脚本学习—正则表达式

    正则表达式概念.特点 正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”, 这个“规则字符串”用来表达对字符串的一种过滤辑. 给定一个 ...

  9. C++操作Windows WIFI

    原文链接地址:https://blog.csdn.net/just_do_1122/article/details/78031024 实现功能     无线网卡列表     无线热点扫面     无线 ...

  10. 获取AD域中SYSVOL和组策略首选项中的密码

    这种方法是最简单的,因为不需要特殊的“黑客”工具.所有的攻击必须做的是打开Windows资源管理器,并搜索域名为SYSVOL DFS共享的XML文件.在大多数情况下,以下XML文件将包含凭据:grou ...