[转载]CSS教程:实例讲解定位Position

时间：2022-09-21 22:04:33

http://www.missyuan.com/thread-395406-1-1.html

1. position:static

所有元素的默认定位都是：position:static，这意味着元素没有被定位，而且在文档中出现在它应该在的位置。

一般来说，不用指定 position:static，除非想要覆盖之前设置的定位。

#div-1 {

 position:static;

}

[转载]CSS教程:实例讲解定位Position

2. position:relative

如果设定 position:relative，就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置，只是视觉上相对于它在文档中的原有位置移动了】

#div-1 {

 position:relative;

 top:20px;

 left:-40px;

}

[转载]CSS教程:实例讲解定位Position

3. position:absolute

当指定 position:absolute 时，元素就脱离了文档【即在文档中已经不占据位置了】，可以准确的按照设置的 top,bottom,left 和 right 来定位了。

#div-1a {

 position:absolute;

 top:0;

 right:0;

 width:200px;

}

[转载]CSS教程:实例讲解定位Position

4. position:relative + position:absolute

如果我们给 div-1 设置 relative 定位，那么 div-1 内的所有元素都会相对 div-1 定位。如果给 div-1a 设置 absolute 定位，就可以把 div-1a 移动到 div-1 的右上方。

#div-1 {

 position:relative;

}

#div-1a {

 position:absolute;

 top:0;

 right:0;

 width:200px;

}

[转载]CSS教程:实例讲解定位Position

5. 两栏绝对定位

现在就可以使用相对定位和绝对定位来做一个两栏布局了。

#div-1 {

 position:relative;

}

#div-1a {

 position:absolute;

 top:0;

 right:0;

 width:200px;

}

#div-1b {

 position:absolute;

 top:0;

 left:0;

 width:200px;

}

[转载]CSS教程:实例讲解定位Position

6. 两栏绝对定位定高

一种方案是给元素设定固定高度。但这种方案对大多数设计来说不太适合，因为一般我们不知道元素中会有多少文本，或者将要使用的精确的字号。

#div-1 {

 position:relative;

 height:250px;

}

#div-1a {

 position:absolute;

 top:0;

 right:0;

 width:200px;

}

#div-1b {

 position:absolute;

 top:0;

 left:0;

 width:200px;

}

[转载]CSS教程:实例讲解定位Position

7. 浮动

对于可变高度的列来说，绝对定位就不起作用了，以下是另外一个方案。

我们可以浮动一个元素，使它移动到左边/右边，并且是文本环绕着它。这主要用于图像，但这里我们把它用于一个复杂的布局任务(因为这是我们唯一的工具)。

#div-1a {

 float:left;

 width:200px;

}

[转载]CSS教程:实例讲解定位Position

8. 浮动列

如果我们把一个元素向左浮动，并且把第二个元素也向左浮动，they will push up against each other。

#div-1a {

 float:left;

 width:150px;

}

#div-1b {

 float:left;

 width:150px;

}

[转载]CSS教程:实例讲解定位Position

9. 清除浮动列

在浮动元素之后，我们可以清除浮动来使其他元素正确定位。

#div-1a {

 float:left;

 width:190px;

}

#div-1b {

 float:left;

 width:190px;

}

#div-1c {

 clear:both;

}

[转载]CSS教程:实例讲解定位Position

虽然我一直用浮动布局，但是掌握好 position 也是必须的，其实也没那么难的。。。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>

 <STYLE TYPE="text/css">

 body {

    font-family: tahoma, helvetica, arial, sans-serif;

    font-size: 12px;

    padding: 0;

    text-align:center;

    background-color:#000000;

}

 #Divbody {

  width:1000px;

  height:900px;

  margin:auto; 

}

 #div-before {

  width:100%;

  height:20px;

  background-color:#FF0000;

}

 #div-after {

  width:100%;

  height:20px;

  background-color:#FD0000;

}

#div-1 {

  width:100%;

  height:500px;

  background-color:#999999;

   position:relative;

}

#div-1a {

  width:200px;

  background-color:#3300FF;

  float:left;

}

#div-1b {

  width:300px;

  height:250px;

  background-color:#66FF00;

}

#div-1c {

  width:100px;

  height:250px;

  background-color:#00FFFF;

  margin:auto;

}

 </STYLE>

</head>

<body>

<div id=Divbody>

    <div id=div-before>#div-before</div>

    <div id=div-1>

        <div id=div-1a>Based on a true story, the Chinese ballet which made its premiere in 1964Based on a true story, the Chinese ballet which made its premiere in 1964Based on a true story, the Chinese ballet which made its premiere in 1964 depicts the liberation of a peasant girl on Hainan Island. The classic ballet will be performed by the Chinese Central Ballet Troupe in Guangzhou in June.

        </div>

        <div id=div-1b>Based on a true story, the Chinese ballet which made its premiere in 1964 depicts the liberation of a peasant girl on Hainan Island. The classic ballet will be performed by the Chinese Central Ballet Troupe in Gu.

        </div>

        <div id=div-1c>Based on a true story, the Chinese ballet which made its premiere in 1964 depicts the liberation of a peas.d.        </div>    </div>    <div id=div-after>#div-after</div></div></body></html>

[转载]CSS教程:实例讲解定位Position的更多相关文章

  1. CSS&lpar;8&rpar;---通俗讲解定位&lpar;position&rpar;

    CSS(8)---通俗讲解定位(position) CSS有三种基本的定位机制: 普通流.浮动.定位.前面两个之前已经讲过,详见博客: 1.CSS(5)---通俗讲解盒子模型 2.CSS(6)---通 ...

  2. CSS 浮动&lpar;float&rpar;与定位&lpar;position&rpar;

    一.浮动 1.三个属性:left.right.none. 2.特点:容易造成父项塌陷,故在父项需要清除浮动 3.父项塌陷现象 4.父项塌陷解决方案(建议使用):清除浮动 .parent:after{ ...

  3. angular&period;js 教程 -- 实例讲解

    angular.js AngularJS [1] 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Ang ...

  4. Vue&period;js 教程 -- 实例讲解

    一. Vue.js是什么 Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项目整合. 1.1 Vue.js的目的 ...

  5. &lbrack;转载&rsqb;CSS教程--字体与文本属性

    b>font-family功能:用于改变HTML标志或元素的字体,你可设置一个可用字体清单.浏览器由前向后选用字体.语法:{font-family:字体1,字体2, ... ,字体n} font ...

  6. &lbrack;转载&rsqb;CSS元素的定位position

    CSS元素的定位position 属性position   值 描述 absolute                             生成绝对定位的元素,相对于 static 定位以外的第一 ...

  7. HTML&plus;CSS教程（六）浮动-float&plus;定位-position&plus;居中问题

    一.浮动(float)1.文档流:是指盒子按照 html 标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置 ...

  8. div&plus;css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  9. CSS&period;04 -- 浮动float、overflow、定位position、CSS初始化

    标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right :  设置浮动的元素,脱离标准流 浮动的框可以向左或向右移动,直到它的外边缘碰 ...

随机推荐

  1. web前端之html5开发中常用的开发工具

    正所谓“工欲善其事,必先利其器”,对Web开发人员来说,好工具的使用总会给人带来事半功倍的效果.正准备学习HTML5或者已经进行了一段时间的HTML5开发的童鞋,都有必要了解下,HTML5都有哪些开发 ...

  2. Windows Azure Cloud Service &lpar;40&rpar; 使用VS2013的publishSettings文件，发布Cloud Service

    <Windows Azure Platform 系列文章目录> 在之前的文档中,笔者已经介绍了如何使用本地证书上传至云端的方式,将本地的Cloud Service发布至云端. 在本章中,笔 ...

  3. UnicodeEncodeError&colon; &lsquo&semi;ascii&rsquo&semi; codec can&rsquo&semi;t encode characters in position xxx ordinal

    python在安装时,默认的编码是ascii,当程序中出现非ascii编码时,python的处理常常会报这样的错UnicodeDecodeError: 'ascii' codec can't deco ...

  4. hdoj 1285 确定比赛名次【拓扑排序】

    确定比赛名次 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  5. markdownpad2注册及样式调整

    pro版密钥 邮箱: Soar360@live.com key: GBPduHjWfJU1mZqcPM3BikjYKF6xKhlKIys3i1MU2eJHqWGImDHzWdD6xhMNLGVpbP2 ...

  6. arcgis api for js入门开发系列十一地图统计图

    上一篇实现了demo的叠加SHP图层,本篇新增地图统计图,截图如下: 地图统计图实现的思路如下:利用拓展arcgis api的js文件(MapChartGraphic.js以及MapChartGrap ...

  7. 大数据平台Lambda架构详解

    Lambda架构由Storm的作者Nathan Marz提出.旨在设计出一个能满足.实时大数据系统关键特性的架构,具有高容错.低延时和可扩展等特. Lambda架构整合离线计算和实时计算,融合不可变( ...

  8. 关于python环境的一些安装设置

    操作系统Redhat Linux,自带python2.6.Python程序的运行其实相当简单,只需在操作系统中安装并配置好python环境即可,和运行java需要配置jre一样(哪里简单,真简单就不会 ...

  9. windows server 2008 修改域的密码策略

    1.一般情况下,进入本地安全策略修改密码策略时,,密码策略已经被锁定,无法更改,若要修改域服务器上的密码策略,请按照步骤2--6进行修改 2.在此情况下要改密码策略的过程如下, 进入组策略管理: 3. ...

  10. WEB前端 &lbrack;编码&rsqb; 规则浅析

    前言 说到前端安全问题,首先想到的无疑是XSS(Cross Site Scripting,即跨站脚本),其主要发生在目标网站中目标用户的浏览器层面上,当用户浏览器渲染整个HTML文档的过程中出现了不被 ...

相关文章