css的三种定位方式使用探讨

原创 2015年11月17日 19:15:21
css 3种类型定位方式,进行控制页面布局:普通定位,浮动定位,绝对定位。 

默认使用普通流技术再页面中布局元素,希望表现与普通流不同,另外两个特性position和float 

具体实例 



复制代码
代码如下:

<html> 
<head> 
<title> 
css定位功能探索 
</title> 
<style type="text/css"> 
#relative{ 
/*相对定位探索 
将相对于它在普通流中位置进行定位 
相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。 
相对定位是“相对于”元素在文档中的初始位置 
*/ 
position: relative; 
top: -10px; 
left: 30px; 
color: red; 
} 
/* 
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块 即是body元素 
*/ 
#absolute1{ 
position: absolute; 
top: 20px; 
left: 360px; 
color: blue; 
} 
/* 
有父元素 不过父元素没有定位 
*/ 
#absolute2{ 
position: absolute; 
top: 50px; 
left: 360px; 
color: blue; 
} 
/*属性和上面一样 
不过是父元素定位方式变为 relative 
*/ 
#absolute3{ 
position: absolute; 
top: 50px; 
left: 360px; 
color: blue; 
} 
/*相对于浏览器窗口来对元素进行定位*/ 
#fixed{ 
position: fixed; 
top: 90px; 
left: 80px; 
} 
/*float定位受当前布局影响,也会影响伺候布局 
比如在普通定位1下行才开始进行浮动 
普通定位2 直接就接在浮动定位后面 
*/ 
#float1{ 
float: left; 
margin-left: 50px; 
} 
#float2{ 
float: left; 
margin-left: 50px; 
} 
</style> 
</head> 
<body style='height: 1000px;'> 
<div> 
position 值为relative 定位探索1 
</div> 
<div id='relative'> 
position 值为relative 定位探索2 
</div> 
<div> 
position 值为absolute 定位探索3 
</div> 
<div id='absolute1'> 
position 值为absolute 定位探索4 
</div> 
<div style='margin-top: 50px;'> 
这是position 值为absolute 定位探索4和5的父元素 
<div id='absolute2'> 
position 值为absolute 定位探索4 
</div> 
<div> 
position 值为absolute 定位探索5 
</div> 
</div> 
<div style='margin-top: 50px;position: relative;'> 
这是position 值为absolute 定位探索6和7的父元素 
<div id='absolute3'> 
position 值为absolute 定位探索6 
</div> 
<div> 
position 值为absolute 定位探索7 
</div> 
</div> 
<div style='margin-top: 20px;'> 
这是position值为fixed 定位探索1 
</div> 
<div id='fixed'> 
这是position值为fixed 定位探索2 
</div> 
<div>这是一个普通定位1</div> 
<div style='border: 2px solid red;' id='float1'>这是float定位1</div> 
<div id='float2' style='border: 2px solid red;'>这是float定位2</div> 
<div>这是一个普通定位2</div> 
</body> 
</html> 

版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS的三种定位方式介绍

在CSS中一共有N种定位方式,其中,static ,relative,absolute三种方式是最基本最常用的三种定位方式。他们的基 本介绍如下。 static默认定位方式 relative相对...

CSS的三种定位方式介绍

在CSS中一共有N种定位方式,其中,static ,relative,absolute三种方式是最基本最常用的三种定位方式。他们的基 本介绍如下。 static默认定位方式 relati...

CSS 三种定位方式

1、相对定位   被看作普通流定位模型的一部分,定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动,元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。 ...

React Native中的CSS的三种使用方式

一、Web端CSS的使用 CSS是Cascading Style Sheet(层叠样式表)的缩写。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 如何将样式...

CSS三种定位模型浅谈

网页有很多布局方式,比如浮动定位(float),绝对定位(fixed),相对定位(relative)等。初学的时候感觉这些定位方式云里雾里的,最近总结了一下这些定位方式,分享一下吧~...
  • lumiyaa
  • lumiyaa
  • 2016年07月11日 08:09
  • 532

android 三种定位方式

最近在看android关于定位的方式,查了很多资料,也做了相关实验,在手机上做了测试,下面总结: 一共有三种定位方式,一种是GPS,一种是通过网络的方式,一种则是在基于基站的方式,但是,不管哪种...
  • qjbagu
  • qjbagu
  • 2013年05月19日 11:17
  • 588

android 三种定位方式

最近在看android关于定位的方式,查了很多资料,也做了相关实验,在手机上做了测试,下面总结: 一共有三种定位方式,一种是GPS,一种是通过网络的方式,一种则是在基于基站的方式,但是,不管哪种...

android 三种定位方式

android 三种定位方式 最近在看android关于定位的方式,查了很多资料,也做了相关实验,在手机上做了测试,下面总结: 一共有三种定位方式,一种是GPS,一种是通过网络的方式,一种...

android 的三种定位方式

Android 定位大致分为三大类:GPS定位;Network定位;AGPS定位。而Network又细分为WIFI定位和基站定位。下面详细讲解每种定位:   android GPS:需要...

android 的三种定位方式

Android 定位大致分为三大类:GPS定位;Network定位;AGPS定位。而Network又细分为WIFI定位和基站定位。下面详细讲解每种定位:   Android GPS:需要GP...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css的三种定位方式使用探讨
举报原因:
原因补充:

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