在CSS中一共有N种定位方式，其中，static ,relative,absolute三种方式是最基本最常用的三种定位方式。他们的基

本介绍如下。

static默认定位方式

relative相对定位，相对于原来的位置，但是原来的位置仍然保留

absolute定位，相对于最近的非标准刘定位，原来的位置消失，被后边的位置所顶替

下面先演示相对定位的案例

 <!DOCTYPE html>

 <html>

   <head>

     <title>relative.html</title>  

     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

     <meta http-equiv="description" content="this is my page">

     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  

   <link rel="stylesheet" href="../css/relative.css" type="text/css"></link>

   </head>  

   <body>

     <div class="style1">内容一</div>

     <div id="special" class="style1">内容二</div>

     <div class="style1">内容三</div>

     <div class="style1">内容四</div>

   </body>

 </html>

CSS代码如下

 .style1{

     width: 300px;

     height: 100px;

     background-color: gray;

     border: 1px solid red;

     float: left;

     margin-left: 10px;

 }  

 #special{

     position: relative;/*这里使用了相对定位,left意思是在原来的位置向左移动多少*/

     left: 40px;/*左侧坐标变大，向右移动*/

     top: 200px;

 }

其中的left是值扩大left的长度，也就是向右移动，当然了，是相对于这个模块的原来的位置。他的后面的元素不会顶

替他的位置，效果图

然后是绝对定位。其中，HTML代码不变，至改变了CSS代码

 .style1{

     width: 300px;

     height: 100px;

     background-color: gray;

     border: 1px solid red;

     float: left;

     margin-left: 10px;

 }  

 #special{

     position: absolute;/*这里使用了相对定位,left意思是在原来的位置向左移动多少*/

     left: 40px;/*左侧坐标变大，向右移动*/

     top: 200px;

 }

绝对定位这里就是相对于body这个元素的绝对定位，当然了，当他的最近处有一个非标准流的东西，他就会跟那个非

标准流为标准进行配对。

效果如如下

Css定位-定位的更多相关文章

  1. CSS 的定位方式和含义

    CSS 的定位方式和含义 总结一下 CSS 的定位方式.CSS 的定位 position 是处理页面布局时非常重要的属性. CSS 中有 3 种基本的定位机制:普通流.浮动和绝对定位. 在没有指定的情 ...

  2. CSS中定位机制的想法

    对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制. position:static | relative | absolute | ...

  3. 转：Selenium之CSS Selector定位详解

    CSS selector定位 CSS(Cascading Style Sheets)是一种语言,它被用来描述 HTML 和 XML 文档的样式.  百度输入框: <input name=&quo ...

  4. CSS 中定位的使用

    position relative 设置区块基准点为左上角(相对定位 以区块的左上角为基准点 仍然会暂居原来的位置) a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元 ...

  5. css的定位机制

    牛腩新闻发不系统中遇到了CSS(Cascading style sheets),第一次接触,比较陌生还!因为CSS很多关于元素定位的问题,并且很多情况下元素的位置以像素精度计.一个不小心就很头疼,为此 ...

  6. css区块定位之浮动与清除属性

    float属性将所属标记的显示空间指定为一个浮动元素,并使其周围对象按一定的方式环绕它排列. float属性的作用就象图像和表格的align属性一样,但可以用到任何元素上. clear属性的作用是禁止 ...

  7. CSS之定位布局（position，定位布局技巧）

    css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...

  8. Selenium自动化-CSS元素定位

    接下来,开始讲解 CSS元素定位. CSS定位速度快,功能多,但是不能向上查找,比 xpath好用,是本人认为最好用的定位方式   大致用法总结: 具体使用仿上篇博客.http://www.cnblo ...

  9. selenium中CSS选择器定位

    selenium元素定位,CSS选择器定位效率会高很多. CSS选择器用于选择你想要的元素的样式的模式.表格摘自“菜鸟教程”,具体用法可去查阅 选择器 示例 示例说明 CSS .class .intr ...

  10. CSS元素定位

    使用 CSS 选择器定位元素 CSS可以通过元素的id.class.标签(input)这三个常规属性直接定位到,而这三种编写方式,在HTML中编写style的时候,可以进行标识如: #su       ...

随机推荐

  1. 如何完全退出android应用程序

    当一个android应用程序包含多个activity时,要完全退出android应用程序,便要销毁掉所有的activity,下面是一种网上流传的比较经典完美的方法: 首先要定义一个继承Applicat ...

  2. 通过编写一个简单的漏洞扫描程序学习Python基本语句

    今天开始读<Python绝技:运用Python成为顶级黑客>一书,第一章用一个小例子来讲解Python的基本语法和语句.主要学习的内容有:1. 安装第三方库.2. 变量.字符串.列表.词典 ...

  3. NYOJ 980 格子刷油漆 动态规划

    这道题目状态转移方程比较复杂,刚开始以为没这么多情况,看了好多大牛的博客再加上与同学讨论才看懂,写下心得. 因为起点不固定,所以我们一个一个来考虑,先从角上考虑,设三个数组来表示分别为D,A,Sum, ...

  4. 95秀-dialog 进度对话框 实用工具

    工具Util public class DialogUtil {     public static ProgressDialogView progressDialog;     /**      * ...

  5. 关于IIS部署成功后，局域网其他用户无法访问的问题解决方法

    关于win7部署iis后,局域网的其他用户不能访问的问题.   在win7系统中,部署好iis后,自己本地可以发布和预览.但在局域网中的其他用户不可以访问.下面说一下这个原因. 这是因为win7自带的 ...

  6. 进阶C#?

    玩了几年的编程了,大四了.本来不想考研,我老师找我谈几次,最近准备考研.从一开始玩java,接触.net中的C#,aps.net,到接触linux,太多太多了. 本来我们专业不是纯计算机的,但是和计算 ...

  7. .NET 编译器（”Roslyn“）介绍

    介绍 一般来说,编译器是一个黑箱,源代码从一端进入,然后箱子中发生一些奇妙的变化,最后从另一端出来目标文件或程序集.编译器施展它们的魔法,它们必须对所处理的代码进行深入的理解,不过相关知识不是每个人都 ...

  8. UIWebView加载不了页面, 但在电脑的浏览器上可以打开

    经排查, 系因为URL中包含有中文, 所以无法加载页面, 解决方法如下: 将URL进行转码 NSString *urlStr =[[NSString stringWithFormat:@"h ...

  9. ubuntu增加工作分区（workspace）命令

    dconf write  /org/compiz/profiles/unity/plugins/core/hsize 3 dconf write  /org/compiz/profiles/unity ...

  10. jquery1.9学习笔记 之选择器(基本元素二)

    类选择器(".class") 描述: 选择所有与给出类匹配的元素 对于类选择器来说,jquery使用的是javascript原生的方法getElementByClassName() ...