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之四种定位的理解

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

浅谈CSS的几种定位

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

CSS三大定位原理&Z-index解析

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

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

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

CSS中常用的几种定位方式

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

HTML中的几种定位方式

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

div+定位

http://www.webw3c.org/divcss-tech/divcss-cengshuxingdingweiyuanli/ 不错的一篇总结性文章! 一、概述二、positio...
  • yangzlgg
  • yangzlgg
  • 2011年10月11日 14:52
  • 4895

css中如何使用定位?

在css中最常用的定位方式有两种,分别是绝对定位和相对定位。这两者对于初学者来说是很不容易弄懂的。要真正理解绝对定位和相对定位,需要先知道一个知识点文档流。那么什么是文档流呢? 一.文档流 CSS...
  • bwf_erg
  • bwf_erg
  • 2017年04月09日 16:44
  • 116

CSS中定位实例

1. 标准流(普通流) 代码模块 osition *{ margin: 0px; padding:...
  • shwanglp
  • shwanglp
  • 2016年12月11日 13:06
  • 750

【WebDriver】selenium使用CSS定位页面元素

一、CSS简介 CSS 指层叠样式表 (Cascading Style Sheets) CSS 选择器参考手册:http://www.w3school.com.cn/cssref/css_selec...
  • galen2016
  • galen2016
  • 2017年05月04日 10:04
  • 4023
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS的三种定位方式介绍
举报原因:
原因补充:

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