我们平时经常用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. Xcode 6添加模板无效

    最近发现从Xcode 5拷贝来的模板在Xcode 6上是OK的,但是自己自定义的却不行,一直使用的是自定义的基类模板,最后发现原因是没有在 TemplateInfo.plist 中注册自定义的模板,注 ...

  2. Java 成员初始化顺序

    package com.cwcec.test; class Fu { int num = 5; //构造代码块 { System.out.println("Fu constructor co ...

  3. 将 Spring 和 Hibernate 与 WebSphere Application Server 一起使用

    本文摘要 如果您考虑将 Spring 或 Hibernate 与 IBM® WebSphere® Application Server 一起使用,则本文向您阐述了如何配置这些框架,以适用于 WebSp ...

  4. WebService(三)

    JAX-WS简单使用示例: 1.服务端 package com.rong.service; import javax.jws.WebMethod; import javax.jws.WebParam; ...

  5. app耗电量测试工具--PowerTutor

    PowerTutor是一款用来测试手机功耗的小工具,它可以只管地展示手机系统主要的组件和各种用户app产生的功耗数据.它可以统计app的屏幕功耗(LCD).CPU功耗以及WiFi和3G网络功耗,我们可 ...

  6. 使用JMeter代理录制app测试脚本

    准备条件:JMeter.手机app 上一篇介绍过录制Web测试脚本的方式有两种,使用代理和使用第三方工具.本篇录制app测试脚本只讨论使用代理的方式,其他方式以后有机会再补充.其实Web和app使用代 ...

  7. 【.Net】C#获取Windows系统特殊文件夹的路径

    系统特殊文件夹是包含公共信息的文件夹,如“Program Files”.“Programs”.“System”或“Startup”.特殊文件夹在默认情况下由系统设置,或者由用户在安装 Windows ...

  8. python的N个小功能(文件内容的匹配替换)

    # -*- coding: utf-8 -*- """ Created on Fri Feb 17 20:25:05 2017 @author: who "&q ...

  9. ICPCCamp 2017 I Coprime Queries

    给出一个长度为\(n\)的正整数序列\(a\),\(m\)次询问\(l,r,x\),问\(max\{i|i\in[l,r],gcd(a_i,x)=1\}\). \(n,m,a_i\le 10^5\). ...

  10. openstack的网络配置

    首先在浏览器输入咱们的控制节点的ip地址登陆horizon,也就是dashboard控制页面 输入好用户名与密码,这时输入的用户名与密码会与我们的老大哥keystone进行认证.确认你输入的这个用户有 ...