position
　　relative 设置区块基准点为左上角(相对定位 以区块的左上角为基准点 仍然会暂居原来的位置)　

　　　　a、不影响元素本身的特性；
　　　　b、不使元素脱离文档流；
　　　　c、如果没有定位偏移量，对元素本身没有任何影响；　　　　

　　　　定位元素位置控制
　　　　　　top/right/bottom/left 定位元素偏移量。

　　absolute 设置网页的为基准点左上角（绝对定位 以网页的左上角为基准点 不会暂居原来的位置）　　

　　　　a、使元素完全脱离文档流；
　　　　b、使内嵌元素支持宽高；
　　　　c、块属性标签内容撑开宽度（在没有设置宽的情况下）；

　　static 无设置

如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；
相对定位一般都是配合绝对定位元素使用；

<title>无标题文档</title>

<style>

div{font-size:20px;}

body{border:1px solid black;}

.box1{width:300px;height:300px; background:red; position:relative;}

.box2{width:200px;height:200px;background:blue; /* position:relative;*/}/*同级的也可以相对定位，你懂的*/

.box3{width:100px;height:100px;background:green; position:absolute;right:0;bottom:0;}

</style>

</head>

<body>

<div class="box1">

    <div class="box2">

    <div class="box3"></div>

  </div>

</div>

</body>

left auto 以基准点定位在左边 像素/百分比 定位在左边
top auto 以基准点定位在上边 像素/百分比 定位在上边
right auto 以基准点定位在右边 像素/百分比 定位在右边
bottom auto 以基准点定位在下边 像素/百分比 定位在下边
z-index auto 自动调整高度 数字 数字越大越往上层（定位元素 默认后者层级高于前者）

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>CSS 中定位的使用</title>

 <style type="text/css">

 div{

     font-size:36px;

     font-family:Arial, Helvetica, sans-serif;

 }

 .div1{

     color:#F00;

     position:absolute;

     top:20px;

     left:20px;

     z-index:3;

 }

 .div2{

     color:#0F0;

     position:absolute;

     top:22px;

     left:22px;

     z-index:2;

 }

 .div3{

     color:#00F;

     position:absolute;

     top:24px;

     left:24px;

     z-index:1;

 }

 </style>

 </head>

 <body>

 <div class="div1">名人名言，你得先是名人了那才是名言，别人的屁都是名屁！你能比吗？</div>

 <div class="div2">名人名言，你得先是名人了那才是名言，别人的屁都是名屁！你能比吗？</div>

 <div class="div3">名人名言，你得先是名人了那才是名言，别人的屁都是名屁！你能比吗？</div>

 </body>

 </html>
<style>

.parent{ border:2px solid red; padding:10px; width:300px; height:300px; margin:90px auto; position:relative;}

.parent a{width:100px; height:100px; line-height:100px; text-align:center; background:red; position:absolute;color:#fff; font-weight:bold; text-decoration:none;}

.link1{top:10px;left:10px;}

.link2{top:10px;right:10px;}

a.link3{top:110px;right:110px; background:blue;color:yellow;}/*这个选择符表示，拥有link3这个类的a标签，这样可以使这个标签覆盖掉上面被设置的有重复的样式*/

.link4{left:10px;bottom:10px;}

.link5{right:10px;bottom:10px;}

</style>

</head>

<body>

<div class="parent">

    <a href="#" class="link1">链接1</a>

    <a href="#" class="link2">链接2</a>

  <a href="#" class="link3">链接3</a>

  <a href="#" class="link4">链接4</a>

  <a href="#" class="link5">链接5</a>

</div>

</body>

position:fixed； 固定定位

与绝对定位的特性基本一致，差别是始终相对整个文档进行定位；对其他元素没有任何的影响

问题：IE6不支持固定定位；

<style>

body{height:1500px;}

.box1{width:500px;height:100px; background:red; position:absolute;right:0;bottom:0;}

.box2{width:300px;height:300px;background:blue;position:fixed;right:0;bottom:0;}/*给内联元素加上定位后可以支持设置宽高*/

</style>

</head>

<body>

<div class="box1">position:absolute;绝对定位</div>

<div style="width:200px; height:200px;border:5px solid black; position:relative; left:50px; top:80px;">

    <span class="box2">position:fixed； 固定定位</span><!--即使是div的子元素，给他加了固定定位后，完全脱离文档流，对其他元素无任何影响-->

</div>

</body>

定位问题

<style>

#box1{width:500px; height:300px; background:blue; overflow:hidden;}/*当子元素的高度高于父元素的时候，没加overflow，子元素会溢出，*/

#box2{width:300px; height:500px; background:yellow; position:relative;}

/*

ie6 下父级的overflow:hidden;是包不住子级的相对定位的

 */

</style>

</head>

<body>

<div id="box1">

    <div id="box2"></div>

</div>

</body>
<style>

#box1{width:303px; height:303px;border:1px solid black; position:relative;}

#box2{ width:50px; height:50px; background:#7c1; position:absolute;right:-1px;bottom:-1px;}

/*

在 IE6 下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。

 */

</style>

</head>

<body>

<div id="box1">

    <div id="box2"></div>

</div>

</body>

CSS 中定位的使用的更多相关文章

  1. css中定位

    一切皆为框div.h1或p元素尝尝被称为块级元素.这意味着这些元素显示为一块内容,即“块框”.与之相反,span和strong等元素称为“称为”行内元素“,这是因为他们的内容显示在行中,即”行内框“. ...

  2. CSS中定位机制的想法

    对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制. position:static | relative | absolute | ...

  3. CSS中定位position

    毋庸置疑的是,pisition是css中是最重要的属性之一. 一共有四种定位方式,static.relative.absolute.fixed. 默认的定位方式static 页面中所有的元素默认都是s ...

  4. CSS中定位和浮动对行内元素的宽高的影响

    行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者posit ...

  5. css中定位功能的特性

    它有四大特性,页面找不到盒子的情况 1.z-index值表示谁压着谁,数值大的压盖数值小的 2.只有定位了的元素,才有z-index.也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-inde ...

  6. CSS学习笔记——CSS中定位的浮动float

    昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么 ...

  7. CSS 中定位方式有几种，说明他们的意义

    1.static  默认定位方式 显示为没有设置定位时的位置 2.fixed(固定定位)  他所相对固定的对象是可视窗口,与其他无关.以浏览器窗口作为参考进行定位 3.relative(相对定位) 元 ...

  8. CSS中的定位与浮动

    CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...

  9. 认识CSS中布局之文档流、浮动、定位以及叠放次序

    前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通 ...

随机推荐

  1. 【转载】一淘技术专家王晓哲：Nginx_lua的测试及选择

    对于Web高性能服务器上的选择,这个是很多人头痛的问题.其实Apache.lighttpd.Nginx都用他们优点,在什么情况下我们如何去选择适合自己的Web高性能服务器,如何去搭建一个适合自己的架构 ...

  2. VS调试Libevent流程

    下载源码包: libevent--stable.tar.gz 第一:编译libevent 进入VS2010命令提示,切换到libevent的所在目录 nmake /f Makefile.nmake 编 ...

  3. Gitlab仓库规范实践建议

    记录一下Gitlab仓库实践信息: 仓库是指一个可以git clone的地址,用于存储某个服务,模块,子系统或某类辅助代码的地方 仓库的visibility level一般设置为Private(访问需 ...

  4. javascript 最常用的技巧整理

    1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键<table border oncontextmenu= ...

  5. ajax原理总结附简单实例及其优点

    在工作中用了Ajax N多次了,也看过一些相关方面的书籍,也算是认识了它,但是一直没有认真总结和整理过相关的东东,失败! 近有闲情,将之总结如下: [名称] Ajax是Asynchronous Jav ...

  6. 帝国cms数据还原后提示数据库表不存在怎么解决?

    下午,ytkah用帝国cms在wamp调试时发现了一个问题,还原备份好的数据后更新的页面提示数据库表不存在,查看了phpmyadmin分类的数据库表实际上是存在的,这个是怎么回事呢?重新搭建一个新站点 ...

  7. 深入理解jQuery的Event机制

    jQuery的Event模块非常强大.其功能远远比原生事件监听器强大许多,对同一个元素的监听只用一个eventListener,内部则是一个强大的观察者,根据匹配事件类型触发相应回调.jQuery不仅 ...

  8. C#修改注册表设置默认浏览器

    项目中用到VPN技术登录来访问内部网络的应用系统,VPN客户端连接后会自动以默认浏览器来打开站点,由于应用系统使用的前端框架对IE浏览器版本要求较高,而用户大多数的电脑里安装的IE的版本都较低,于是想 ...

  9. CF A. Xenia and Divisors

    题目大意: n(为三的倍数)个数的一个序列(每个数均不大于7),找出a,b,c a能被b整除,b能被c整除,序列中的每个数都被用到. 1 2 3 4 5 6 7 只有 1 2 4 1 2 6 1 3 ...

  10. iOS 开发压缩--SSZipArchive

    // 解压 NSString *zipPath = @"被解压的文件路径"; NSString *destinationPath = @"解压到的目录"; [S ...