5、定位和移动：
Positioning(定位)
CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法.

有四种不同的定位方法。

Static 定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到top, bottom, left, right影响。

Fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

Relative 定位
相对定位元素的定位是相对其正常位置。
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。

Absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
h2
{
position:absolute;
left:100px;
top:150px;
}
Absolutely定位使元素的位置与文档流无关，因此不占据空间。
Absolutely定位的元素和其他元素重叠。

重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序：
如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

top|bottom|left|right 定义了一个定位元素的上|下|左|右外边距边界与其包含块上|下|左|右边界之间的偏移。

6、移动：什么是CSS Float(浮动)?
CSS的Float(浮动)，元素向左或右尽量移动，直到它遇到父元素的边界或另一个浮动元素才会停止。

元素怎样浮动
元素的水平方向浮动意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或右。通常，这意味着尽所有的可能在所有包含元素的左侧或右侧的。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边:
img
{
float:right;
}
果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
在这里，我们已经对图片廊使用float属性：
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}

清除浮动 - 使用clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用clear属性
。clear属性指定其他元素双方都不能使用元素的浮动功能。
.text_line
{
clear:both;
}

CSS定位（postion）和移动(float)的更多相关文章

  1. css定位、position与float同时使用的情况

    一.css定位 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 1.普通流:未专门指定的元素都在普通流中定位,position:static/relative;和float:none;也在普通 ...

  2. web前端css定位position和浮动float

    最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框 ...

  3. CSS定位机制：浮动 float及清除浮动的常用方法

    CSS的定位机制 1.普通流(标准流) 默认状态,元素自动从左往右,从上往下排列 块元素的特征: 独占一行 可以设置宽高 如果不设置宽度,宽度默认为容器的100% 常见的块元素:div p h1-h6 ...

  4. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  5. css定位

    文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...

  6. CSS魔法堂：说说Float那个被埋没的志向

    前言  定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了:2. 它跟Normal flow靠得太近了.本文尝试理清Fl ...

  7. 装载：对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  8. CSS定位（CSS定位概述、相对定位、绝对定位、浮动）

    CSS 定位属性 CSS 定位属性允许你对元素进行定位. 属性 描述 position 把元素放置到一个静态的.相对的.绝对的.或固定的位置中. top 定义了一个定位元素的上外边距边界与其包含块上边 ...

  9. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

随机推荐

  1. xcode 中添加pch文件

    xcode6以后去掉了pch文件,据说苹果是觉得把头文件加在pch中,会让编译变慢,但是作为我们程序员来说难不倒我们,所以我们手动来添加一下pch文件即可   首先创建一个工程,然后创建一个pch文件 ...

  2. C++练习题

    1. 用面向对象的程序描述员工拥有的股票,股票有公司,价格,数量属性,且拥有展现基本数据,更新价格,买进,卖出操作,并具有比较两个股票对象股值大小的比较方法. 2. 用面向对象的程序描述一个栈的操作, ...

  3. 谷歌笔试题——排序，只允许0和其他元素交换

    2.2 长度为n的数组乱序存放着0至n-1. 现在只能进行0与其他数的swap,请设计并实现排序. 这题有一个隐含条件:即数组元素是连续的,即0--n-1,当你排好序后,你会发现数组元素和该元素的下标 ...

  4. codeforces 390E Inna and Large Sweet Matrix

    本题的主要算法就是区间更新和区间求和: 可以用线段树和树状数组来做: 感觉线段树写的太麻烦了,看到官方题解上说可以用树状数组做,觉得很神奇,以前用过的树状数组都是单点维护,区间求和的: 其实树状数组还 ...

  5. Android RelativeLayout 属性

    // 相对于给定ID控件 android:layout_above 将该控件的底部置于给定ID的控件之上; android:layout_below 将该控件的底部置于给定ID的控件之下; andro ...

  6. 严重: The web application [] registered the JDBC driver 错误

    近日发现启动tomcat的时候报如下警告: -- :: org.apache.catalina.loader.WebappClassLoader clearReferencesJdbc 严重: The ...

  7. 汇编函数调用中bp和sp是指什么?

    bp为基址寄存器,一般在函数中用来保存进入函数时的sp的栈顶基址sp是栈顶指针,它每次指向栈顶.每次子函数调用时,系统在开始时都会保存这个两个指针并在函数结束时恢复sp和bp的值.像下面这样:在函数进 ...

  8. Android ServiceConnection

    绑定到一个Service 应用组件(客户端)可以调用bindService()绑定到一个service．Android系统之后调用service的onBind()方法,它返回一个用来与service交 ...

  9. hdu4323Magic Number(dp）

    http://acm.hdu.edu.cn/showproblem.php?pid=4323 去年的多校 编辑距离的变形 暴力居然过了 还想了好久别的方法,想得很头疼 #include <ios ...

  10. apache开源项目--ibatis

    iBATIS一词来源于“internet”和“abatis”的组合,是一个由Clinton Begin在2001年发起的开放源代码项目.最初侧重于密码软件的开发,现在是一个基于Java的持久层框架.i ...