我们平时经常用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. Alpha冲刺——第八天

    Alpha第八天 听说 031502543 周龙荣(队长) 031502615 李家鹏 031502632 伍晨薇 031502637 张柽 031502639 郑秦 1.前言 任务分配是VV.ZQ. ...

  2. 模拟登入教务处(header)

    import HTMLParser import urlparse import urllib import urllib2 import cookielib import string import ...

  3. 02_Java基础_第2天(变量、运算符)_讲义

    今日内容介绍 1.变量 2.运算符 01变量概述 * A: 什么是变量? * a: 变量是一个内存中的小盒子(小容器),容器是什么?生活中也有很多容器, * 例如水杯是容器,用来装载水:你家里的大衣柜 ...

  4. iOS- 如何建立索引实现本地文本搜索引擎,允许容错搜索?

    1.前言 实现一个本地搜索引擎,允许容错搜索,也就是搜索结果不需要和搜索的关键字完全精准匹配.比如,搜索”eric wang“,搜索结果可以包括Erica Watts等等.搜索效率十分高. 这里我们需 ...

  5. 转 下一代云计算模式:Docker正掀起个性化商业革命

    下一代云计算模式:Docker正掀起个性化商业革命 作者: 吴宁川  来源: ITValue  发布时间: 2015-09-20 10:41  阅读: 14052 次  推荐: 26   原文链接   ...

  6. 201621123037 《Java程序设计》第12周学习总结

    作业12-流与文件 标签(空格分隔): Java 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 答: 读取操作 从文件中读取: 1.字节流 InputStr ...

  7. QtCharts模块在QtWideget中图表绘制(非QML)

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QtCharts模块在QtWideget中图表绘制(非QML)     本文地址:http:/ ...

  8. PHP Mailer 发送邮件

    <?php /* 下载网址 https://github.com/PHPMailer/PHPMailer 打开下载的压缩包文件目录 将 PHPMailer-master 下的 src 文件夹复制 ...

  9. jar读取外部和内部配置文件的问题

    最近修改XX应用的时候,涉及到需要在jar包中读取工程配置文件的问题.在jar包中,读取配置文件,需要单独处理. 项目中的一些配置文件,如dbconfig.properties log4j.xml 不 ...

  10. 阿里中间件RocketMQ

    阿里RocketMQ是怎样孵化成Apache顶级项目的? RocketMQ 迈入50万TPS消息俱乐部 Apache RocketMQ背后的设计思路与最佳实践 专访RocketMQ联合创始人:项目思路 ...