CSS的三种定位方式介绍

原创 2012年03月24日 15:11:05

在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三大定位原理&Z-index解析

一、理解定位(static是默认的)原始图—不加定位1.absolute(绝对定位) 1.脱离标准流,在页面中不占位置(浮起来) 2.如果没有父元素,则相对于body定位;如果有父元素,但父...
  • w_linux
  • w_linux
  • 2017年03月29日 22:18
  • 687

CSS中的三种基本的定位机制(普通流、定位、浮动)

一、普通流   普通流中元素框的位置由元素在XHTML中的位置决定。块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。   普通流就是html文档中...

CSS之四种定位的理解

Static 这个是元素的默认定位方式,元素出现在正常的文档流中,会占用页面空间。不能使用top,bottom,left,right和z-index。 Relative 相对定位方式,相对于其...
  • Mr_28
  • Mr_28
  • 2017年02月03日 14:18
  • 1793

CSS中常用的几种定位方式

CSS中常用的几种定位方式 第一类 float定位(即浮动定位): 这种定位方式很简单,只需规定一个浮动的方向(如:float:left;就表示这个元素向左边摆放),它的定位是相对于父元素容...

HTML中的几种定位方式

1,static(默认) 当你没有为一个元素(例如div)指定定位方式时,默认为static,也就是按照文档的流式(flow)定位,将元素放到一个合适的地方。所以在不同的分辨率下,采用流式定位能...
  • hejisan
  • hejisan
  • 2016年09月12日 15:47
  • 4733

CSS的两个class选择器紧挨在一起

有一段HTML代码:对应有CSS style:.glyphicons.white i:before { color: #fff; } .glyphicons.white:hover i:befor...
  • leftfist
  • leftfist
  • 2016年05月11日 20:07
  • 10927

浅谈CSS的几种定位

1、绝对定位(absolute) 将被赋予绝对定位的元素从文档流中拖出,使用left、right、top、bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位,如果元素的父级没有...

CSS学习笔记:三种定位机制之三绝对定位

CSS中规定的第三种定位机制:     绝对定位布局

Struts2.0 (开发之三)--数据校验框架--CTO

本文为原创,转载时请注明出处:http://blog.csdn.net/ctojxzsycztao;作者:ctojxzsycztao上一编文章给大家讲了Struts2 的跟踪状态,我们都知道如何跟踪一...

struts2 动态方法调用 感叹号

学习Struts2有一段时间了。对于Struts2的动态方法调用做一下总结。 struts2的动态方法调用概括起来有三种方式,下面介绍: 1、第一种方式:设置method属性 在Action类中...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS的三种定位方式介绍
举报原因:
原因补充:

(最多只允许输入30个字)