我们平时经常用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. keepalived 高可用(IP飘移)

    什么是keepalived? keepalived是一个在c中编写的路由软件,该项目的主要目标是为Linux系统和基于Linux的基础架构提供简单和强大的设备,用于loadbalance和高可用性.l ...

  2. 2nd 词频统计效能测试

    词频统计效能测试 使用性能分析工具分析结果如下 :

  3. laravel获取当前认证用户登录

    可以通过Auth门面访问认证用户: 要在方法上面声明 use Auth: 获取当前认证用户使用 $user = Auth::user(); 获取用户认证ID $id = Auth::id;

  4. linux自启动、定时启动脚本

    linux开机自启动 想让一个程序.脚本开机自启动,可以在/etc/rc.d目录下面找到rc.local文件,编辑该文件,在尾部加上需要运行的命令即可. 如: #cd /etc/rc.d #sudo ...

  5. Spring Security 入门详解

    序:本文主要参考 spring实战 对里面的知识做一个梳理 1.Spring Security介绍 Spring Security是基于spring的应用程序提供声明式安全保护的安全性框架,它提供了完 ...

  6. PHP中类中成员及常量

    类中成员概述 面向对象编程,是需要通过“对象”去做什么事情(以完成某种任务): 而: 对象总是来源于类: 所以: 面向对象的编程,一切都是从定义类开始: 类中成员分为3大类: 属性: 方法: 常量: ...

  7. python之enumerate()学习

    X = 'abcdefghijklmn' for (index,char) in enumerate(X): print (index, char) 利用enumerate()函数,可以在每次循环中同 ...

  8. 从原理上搞定编码(二)-- Web编码

    周末宅在家里睡完觉就吃饭,吃完饭接着睡觉,这日子过的实在是没劲啊.明明还有计划中的事情没有做, 为什么就是不想去做呢,这样的生活持续下去,必然会成为一个彻头彻尾的loser.上一篇写的 初识编码 ,这 ...

  9. 【一】shiro入门 之 Shiro简介

    Shiro 可以非常容易的开发出足够好的应用,其不仅可以用在JavaSE 环境,也可以用在JavaEE 环境.Shiro 可以帮助我们完成:认证.授权.加密.会话管理.与Web 集成.缓存等.这不就是 ...

  10. [洛谷P4910]帕秋莉的手环

    题目大意:有一个$n(n\leqslant10^{18})$个点的环,每个点可以是$0$或$1$,要求相邻点中至少一个$1$,问方案数,多组询问. 题解:先考虑是一条链的情况,令$f_{i,j}$表示 ...