假设您认为这篇文章还不错。能够去H5专题介绍中查看很多其它相关文章。

CSS 定位机制

CSS中一共同拥有三种基本定位机制：普通流、浮动、绝对定位。

假设不进行专门指定。全部的标签都在普通流中定位。

块级元素从上到下一个接一个的排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。

能够使用水平内边距、边框和外边距来调整它们之间的间距。

position属性

通过position属性。我们能够选择4种不同类型的定位，这会影响元素框生成的方式。

包括4个属性值：static、relative、absolute、fixed

  • static : 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分。行内元素则会创建一个或多个行框。置于其父元素中。

  • relative : 元素框偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍然保留。
  • absoulte : 元素框从文档流中全然删除，并相对于其包括块定位。

    元素原先在正常文档流中所占的空间会关闭。就好像元素不存在一样。

    元素定位后生成一个块元素，而不论原来它在正常文档流中生成何种类型的框。

  • fixed : 元素框的表现相似将position设置为absoulte，只是其包括块是浏览器窗体。

代码展示

position: static;

static是position属性的默认值。无特殊定位。均为正常定位。

position: reletive;

HTML代码:

<p class="p1">

    我是p1

</p>

<p class="p2">

    我是p2

</p>

<p class="p3">

    我是p3

</p>

CSS代码:

.p1 {

    position: relative;

    left: 30px;

}

.p2 {

    position: relative;

    right: 30px;

}

效果图：

解释：

  • position: relative;參考的是自己原来得位置。
  • 第一行文字设置postion为relative，这并不会造成什么反应。可是我们还给p1设置了left: 30px;。这就会使元素距离左側产生30px的间距。

  • 相同。第二行文字设置right: 30px，会使元素距离右側30px的间距。就产生了跑到屏幕外面的情况
  • 第三方没有做不论什么处理。正常显示
  • 注意，一定要设置好position: relative;，否则top、right、bottom、left是不起作用的。

position: absoulte;

HTML代码:

啦啦啦啦啦

<h1 class="h1">我是h1大标题</h1>

CSS代码:

.h1 {

    position: absolute;

    top: 100px;

    left: 100px;

}

没有设置CSS样式的样子：

设置了CSS样式后的样子：

解释：

  • postion: absolute;參考的是自身的包括块，也就是自己的父视图
  • 当设置了position: absolute;属性之后，标签的位置就变得绝对了。这个时候我们设置top、right、bottom、left当中的不论什么一个属性。都能够设置标签的位置。
  • 注意，一定要设置好position: absolute;，否则top、right、bottom、left是不起作用的。

position: fixed;

HTML代码:

<p class="one">

    我是p one

</p>

<p class="two">

    我是p two

</p>

CSS代码:

.one {

    position: fixed;

    top: 100px;

    left: 30px;

}

.two {

    position: fixed;

    top: 50px;

    right: 30px;

}

效果展示：

解释：

  • position: fixed;參考系是浏览器的窗体
  • 当给标签设置了position: fixed;属性之后。这些标签就仅仅会相对于浏览器窗体进行位置的设定。忽略网页的滚动
  • 相同。假设不设置postion: fixed;属性。而是直接设置top、right、bottom、left都不会起作用

參考文章：http://www.w3school.com.cn/css/css_positioning.asp

关于界面排布优先级的问题 z-index

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style media="screen">

    div{

      width: 100px;

      font-size: 50px;

      position: absolute;

      height: 100px;

    }

    .a{

      background-color: red;

      left: 0;

      top: 0;

        /*设置优先级。数字越大，放置越靠前*/

      z-index: 3;

    }

    .b{

      background-color: blue;

      left: 40px;

      top: 40px;

      z-index: 2;

    }

    .c{

      background-color: green;

      left: 80px;

      top: 80px;

      z-index: 100;

    }

  </style>

</head>

<body>

<div class="a">1</div>

<div class="b">2</div>

<div class="c">3</div>

</body>

</html>

关于界面元素框偏移

偏移前：



偏移后： 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    .wrap{

        width: 300px;

        height: 300px;

        border: 1px solid red;

        margin: 100px;

        padding: 100px;

        position: relative;

        padding-left: 0;

    }

    .inner{

        width: 200px;

        height: 200px;

        background-color: green;

        padding: 50px;

        position: relative;

    }

    .content{

        width: 50px;

        height: 50px;

        background-color: red;

        position: absolute;

        left: 0;

    }

    </style>

</head>

<body>

    <!--

    position:absolute;默认是相对于窗体进行定位

     -->

    <div class="wrap">

        <div class="inner">

            <div class="content"></div>

        </div>

    </div>

</body>

</html>

2016.3.14__CSS 定位__第六天的更多相关文章

  1. 2016.3.17__CSS3动画__第十一天

    CSS3动画 假设您认为这篇文章还不错,能够去H5专题介绍中查看很多其它相关文章. 通过 CSS3,我们能够创建动画,这能够在很多网页中取代动绘图片.Flash 动画以及 JavaScript. 今日 ...

  2. 我的Python成长之路---第六天---Python基础（20）---2016年2月20日（晴）

    一.面向对象基础 面向对象名词解释: 类(Class): 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例. 类变量:类变量在整个实例化的对象中是公 ...

  3. __x__(34)0908第五天__ 定位 position

    position 定位 指将原始摆放到页面的任意位置. 继承性:no 默认值:static        没有定位,原始出现在正常的文档流中 可选值: static :    默认值,元素没有开启定位 ...

  4. [android学习]__使用百度地图开放api编写地图定位app

    前言 在前面我已经记录关于如何使用百度地图api,以及如何配置相关的androidstudio配置了,接下来将记录如何使用百度地图api开发简单的地图定位apk,我将决定不定期持续更新本篇笔记,在每个 ...

  5. Appium入门（8）__控件定位

    部分摘自:http://www.testclass.net/appium/appium-base-find-element/ appium 通过 uiautomatorviewer.bat 工具来查看 ...

  6. iOS 学习笔记五 【2016年百度地图定位详细使用方法】

    具体介和配置绍在此就不详述了,详情请看百度地图API文档, 在这里具体讲解下,新版百度地图的定位与反地理编码的使用: 1.导入头文件 #import <BaiduMapAPI_Map/BMKMa ...

  7. 2016.3.16__HTML5新特性__第八天

    HTML 5 + CSS 3 假设您认为这篇文章还不错,能够去H5专题介绍中查看很多其它相关文章. 今日代码非常冗杂,所以非常多内容直接摘自网上,假设造成您的不适.请留言告知. 非常感谢. 输入标签, ...

  8. 2016.3.15__H5页面实战__第七天

    假设您认为这篇文章还不错,能够去H5专题介绍中查看很多其它相关文章. 个人简书地址: dhttp://www.jianshu.com/users/5a2fd0b8fb30/latest_article ...

  9. 第六天-css基础（css定位)

    css定位   方位名称:  left  right  top  bottom   position:absolute 绝对定位(脱离标准流 div{ width:100px; height:100p ...

随机推荐

  1. Vue路由query传参

    1.不要进行过深的嵌套 let id = 'uyu' this.$router.push({ path: '/mrp_detail', query: { re_order_id: id, option ...

  2. HTML基础第六讲---表格

    转自:https://i.cnblogs.com/posts?categoryid=1121494 上一讲,讲了关于<控制表格及其表项的对齐方式>,在这里我要讲讲表格及其属性 ,然后大家在 ...

  3. 1.15 Python基础知识 - 函数

    函数是可重用的程序代码段. 一.函数的声明和调用 声明格式: def 函数名([形参列表]): 函数体 调用格式: 函数名([实参列表]) 函数名:是一种标识符,命名规则为全小写字母,可以使用下划线增 ...

  4. 1.11 Python基础知识 - 序列：元组

    元组(tuple)是一组有序系列,元组和列表是否相似,但是元组是不可变的对象,不能修改.添加或删除元组中的元素,但可以访问元组中的元素 元组的定义: 元组采用圆括号中用逗号分隔的元素 元组的基本操作和 ...

  5. 例说linux内核与应用数据通信（一）：加入一个系统调用

    [版权声明:尊重原创.转载请保留出处:blog.csdn.net/shallnet,文章仅供学习交流,请勿用于商业用途]         应用不能訪问内核的内存空间.为了应用和内核交互信息,内核提供一 ...

  6. Android 设置背景透明度

    一些时候,我们须要为UI页面设置背景色,例如以下图所看到的: 上图已注: 背景颜色为#000000,透明度为40%: 那么.怎样在代码中表示呢? 首先须要了解: 颜色和不透明度 (alpha) 值以十 ...

  7. 2016最热门的PHP框架（一共五款）

    摘要: 兄弟连IT教育作为全国最大的PHP培训机构,迄今已有10年的教育历史.6大特色课程:PHP编程.安卓培训.JAVAEE+大数据.UI设计.HTML5培训.云计算架构师,在目前IT市场特别火,每 ...

  8. 2.JPA学习总结

    转自:https://shmilyaw-hotmail-com.iteye.com/blog/1969190 前言 最近在做一个项目的时候因为牵涉到要对数据库的操作,在最开始实现的时候采用了直接的JD ...

  9. E11 css hack

    E11      识别\0 { color:red; color:blue \0; } chrome下颜色是红色.IE11是蓝色

  10. LA 5902 - Movie collection 树状数组（Fenwick树）

    看题传送门 题目大意:XXX喜欢看电影,他有好多好多的影碟,每个影碟都有个独立的编号.开始是从下往上影碟的顺序是n~1,他每次拿出影碟的时候,你需要输出压在该影碟上的有几个.(拿出后其他影碟顺序不变) ...