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

CSS 定位机制

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

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

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

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

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

position属性

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

包括4个属性值:staticrelativeabsolutefixed

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

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

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

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

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

代码展示

position: static;

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

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;,否则toprightbottomleft是不起作用的。

position: absoulte;

HTML代码:

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

CSS代码:

.h1 {
position: absolute;
top: 100px;
left: 100px;
}

没有设置CSS样式的样子:

设置了CSS样式后的样子:

解释:

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

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;属性。而是直接设置toprightbottomleft都不会起作用

參考文章: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. [转]Accept-Encoding

    原文地址:https://blog.csdn.net/sqzhao/article/details/49499471 HTTP Header中Accept-Encoding 是浏览器发给服务器,声明浏 ...

  2. 【Codeforces Round #428 (Div. 2) C】Journey

    [Link]:http://codeforces.com/contest/839/problem/C [Description] 给一棵树,每当你到一个点x的时候,你进入x的另外一每一个出度的概率都是 ...

  3. 洛谷 P2374 搬运工

    P2374 搬运工 题目背景 陈老师喜欢网购书籍,经常一次购它个百八十本,然后拿来倒卖牟取暴利.(ps:描述要看懂) 题目描述 前些天,高一的新同学来了,他便像往常一样兜售他的书,经过一番口舌,同学们 ...

  4. manjaro安装virtualbox教程

    安装前需要知道 你需要知道你当前的内核版本 uname -r,比如输出了4.14.20-2-MANJARO那么你的内核版本为414 安装VirtualBox sudo pacman -S virtua ...

  5. ZOJ 题目3587 Marlon&#39;s String(KMP)

    Marlon's String Time Limit: 2 Seconds      Memory Limit: 65536 KB Long long ago, there was a coder n ...

  6. html只能有一个id,并且id的值只能是一个

    1.如果有相同的ID,javascript只会取第一个具有该ID的标签. 2.如果id值有两个,JS只会取到第一个,并不会像class类一样,类名并列就可以同时取到.

  7. spring使用context:property-placeholder载不进属性问题 wangbiglei 发表于1年前 原 spring使用context:property-placeholder载不进属性问题

    https://my.oschina.net/wangbiglei/blog/489583 http://www.cnblogs.com/leftthen/p/5615066.html

  8. 利用mysql5.6 的st_distance 实现按照距离远近排序。 (转载)

    http://blog.csdn.net/zhouzhiwengang/article/details/53612481

  9. Android实践 -- 监听应用程序的安装、卸载

    监听应用程序的安装.卸载 在AndroidManifest.xml中注册一个静态广播,监听安装的广播 android.intent.action.PACKAGE_ADDED 监听程序卸载的广播 and ...

  10. Android Set与List之间转化

    List list = new ArrayList(set); Set set = new HashSet(list); //但是有一点,转换当中可能要丢失数据,尤其是从list转换到set的时候,因 ...