在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+Js定位与相对定位
详解css定位与定位应用,很棒的指南哦,让你知道css如何定位
CSS_样式定位图
css的绝对定位,相对定位,浮动的规则。等等等
css浮动和定位
css定位功能探索 </title> <style type=”text/css”> #relative{ /*相对定位探索 将相对于它在普通流中位置进行定位 相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中...
本人整理的css定位
在CSS中关于定位的内容是:position:relative | absolute | static | fixed。static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。在本文中,任何一个元素都被文本流所限制了自身的位置,但是...
作用:检索或者设置元素的定位方式(改变元素位置的属性) *定位分为静态定位,绝对定位,相对定位,固定定位,粘性定位* (1)static 静态定位: position的默认值,默认文本流的状态。 不会识别left ...
介绍了css的定位属性,position的相对定位,绝对定位等,里面的内容并不是很全,希望可以给你提供一些帮助。
css图片定位工具 很好用的 做html时把图片整合定位的好工具
有了这个就可以搞定很多事情 在“CSS规则对话框”中,我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置,来美化我们的页面,当然啦,我们在定义某个...还有【CSS定位详解之绝对定位和相对定位】哦
CST CSS图片拼合定位工具
css 相对定位 设置为相对定位的元素框会偏移某个距离。元素仍然保持其为定位前的形状,它原本所占的空间仍保留。 css相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在她所在的...
基于CSS技术的测距定位原理,1.2G和2.4G测距定位原理
css定位的介绍大全.docx
CSS相对定位和绝对定位,让你轻松了解css的定位知识和相关的内容
CSS 定位属性允许我们操作自然的文档流,在页面上排列方框,以达到美观且用户友好的设计。在实际创建 CSS 布局之前,这是需要理解的最后一个概念。 不同的定位类型(静态、绝对、相对和固定),以及位置的浮动,涵盖了...
selenium css selector 定位详解
css有几种定位方式,分别是如何实现定位的