注册 | 登陆
您的位置:阿里西西 > 前端技术 > CSS教程 > 详细内容

css基础教程之定位方法:绝对定位、相对定位、fixed和

  稿源:本站整理   2018-09-14   点击:   撤稿纠错
通过几段案例代码,让您了解CSS的绝对定位、相对定位、fixed和static几种方法

以下讨论的是和定位 绝对定位 相对定位 fixed static 相关的css基础教程之定位方法:绝对定位、相对定位、fixed和static教程文章,内容是本站精心挑选整理的教程,希望对广大的网友给到帮助,下面是详细内容:

1.绝对定位(absolute):脱离原来位置进行定位,可以使用left right top bottom进行定位

html代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meter charset="utf-8">
	<title>hhhh</title> 
	<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
	<p class="demo"></p>
	<p class="box"></p>
</body>
</html>

css代码:

*{
	margin:0;
	padding:0;
}
.demo{
	position:absolute; 
	/*top:100px;
	left:100px;*/
	width: 100px;
	height: 100px;
	background-color: red;
	opacity: 0.5;     /*透明度*/
}
.box{
	width:150px;
	height:150px;
	background-color: green;
}

2.相对定位(relative):保留原来位置进行定位,可以使用left right top bottom进行定位

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meter charset="utf-8">
	<title>hhhh</title> 
	<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
	<p class="demo"></p>
	<p class="box"></p>
</body>
</html>

css代码

*{
	margin:0;
	padding:0;
}
.demo{
	position:relative; 
	/*top:100px;
	left:100px;*/
	width: 100px;
	height: 100px;
	background-color: red;
	opacity: 0.5;     /*透明度*/
}
.box{
	width:150px;
	height:150px;
	background-color: green;
}

3.fixed:相对于浏览器的窗口对元素进行定位,可以使用left right top bottom进行定位

4.static:默认值,没有定位,top left 等不起作用

注意:存在父子元素使用定位时

absolute: 相对于最近的有定位的父级进行定位,要是没有最就相对文档进行定位
relative:相对于自己原来的位置进行定位

通常情况下,我们使用relative作为参照物,使用absolute进行定位

例如:

<div class="wrapper">
    <div class="demo">    
        <div class="box"></div>
    </div>
</div>

若使box参照demo进行定位则

*{
	margin:0;
	padding:0;
}

.wrapper{
	margin-left: 100px;
	width: 200px;
	height: 200px;
	background-color: orange;
}
.demo{
	position:relative; 
	margin-left: 100px;
	width: 100px;
	height: 100px;
	background-color: red;
	
}
.box{
	position:absolute;
	left: 50px;
	width:50px;
	height:50px;
	background-color: green;
}

css基础教程之定位方法:绝对定位、相对定位、fixed和static文章就讲到这里,欢迎浏览本站的其它内容,点击这里返回首页

相关阅读

相关排行总榜

网页教程

网站运营

特效排行

教你如何使用js+CSS写出类似FLASH动画的网
一款CSS3制作的带尖角的按钮实例代码
目前主流浏览器对于HTML5与CSS3的支持情况
全面剖析前端Ajax技术原理及知识
分享一个HTML5 + JavaScript实现Flash动画
用PHOTOSHOP把美女头画像制作成漂亮的仿手
淘宝网及新浪网等几大官方IP查询API接口地
用Photoshop制作淘宝大促双十一电商促销宣
用HTML5+css3制作HTML5验证的网页表单
通过html5代码实现在网页中插入和播放mp4
如何让您的微信公众号内容快速增加阅读量
网站用户界面设计(网页设计)命名规范
分享一些企业微信营销推广的技巧与经验
可以借鉴和学习的小米模式4大经验要素
SEO优化中网站title标题优化总结及经验分
为什么说建站要从网站用户忠诚度着手,知
一个优秀的SEM进行百度搜索推广账号架构经
谈谈从了解用户开始互联网推广的营销策略
谈谈新手运营网站如何做好网站的广告位投
清理您网站上的黑链的几个招数
JS制作循环上下左右平移转圈的图层特效
原生js写的贪食蛇网页版小游戏特效代码,
用CSS3实现的addidas阿迪达斯标志LOGO特效
HTML5打造的酷炫3D 360度图片立体浏览特效
通用canvas代码实现的JS画圆圈动画特效代
通过HTML5+SVG制作奔跑的小马驹动画特效
jquery实现拖拽进度条并显示百分比的特效
用HTML5+canvas代码绘制的星空月亮图案特
简单实用的纯CSS实现的横向多级导航特效代
原生JS写的一个书架式的图片缩放滚动展示