关闭

CSS的三种定位方式介绍

标签: cssstylesheetclassdivhtml
22776人阅读 评论(4) 收藏 举报
分类:

在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这个元素的绝对定位,当然了,当他的最近处有一个非标准流的东西,他就会跟那个非

标准流为标准进行配对。

效果如如下



17
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1212791次
    • 积分:14576
    • 等级:
    • 排名:第841名
    • 原创:256篇
    • 转载:3篇
    • 译文:2篇
    • 评论:277条
    博主介绍
    github 收集的一些不错的文章

    github
    博客专栏
    最新评论