CSS 中定位的使用
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 中定位的使用的更多相关文章
- css中定位
一切皆为框div.h1或p元素尝尝被称为块级元素.这意味着这些元素显示为一块内容,即“块框”.与之相反,span和strong等元素称为“称为”行内元素“,这是因为他们的内容显示在行中,即”行内框“. ...
- CSS中定位机制的想法
对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制. position:static | relative | absolute | ...
- CSS中定位position
毋庸置疑的是,pisition是css中是最重要的属性之一. 一共有四种定位方式,static.relative.absolute.fixed. 默认的定位方式static 页面中所有的元素默认都是s ...
- CSS中定位和浮动对行内元素的宽高的影响
行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者posit ...
- css中定位功能的特性
它有四大特性,页面找不到盒子的情况 1.z-index值表示谁压着谁,数值大的压盖数值小的 2.只有定位了的元素,才有z-index.也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-inde ...
- CSS学习笔记——CSS中定位的浮动float
昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么 ...
- CSS 中定位方式有几种,说明他们的意义
1.static 默认定位方式 显示为没有设置定位时的位置 2.fixed(固定定位) 他所相对固定的对象是可视窗口,与其他无关.以浏览器窗口作为参考进行定位 3.relative(相对定位) 元 ...
- CSS中的定位与浮动
CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...
- 认识CSS中布局之文档流、浮动、定位以及叠放次序
前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通 ...
随机推荐
- Sencha Touch xtype对应的class
Sencha Touch 2的有效xtype xtype Class ----------------- --------------------- actionsheet Ext.ActionShe ...
- jQuery1.9.1--attr,prop与val方法源码分析
这里只介绍这几个方法的源码,这部分引用了一个技巧,钩子对象,用来做兼容fixed的对象,后面也有一些使用.钩子对象具体的兼容细节这里就不详解了. var nodeHook, boolHook, rcl ...
- mysql死锁,等待资源,事务锁,Lock wait timeout exceeded; try restarting transaction解决
前面已经了解了InnoDB关于在出现锁等待的时候,会根据参数innodb_lock_wait_timeout的配置,判断是否需要进行timeout的操作,本文档介绍在出现锁等待时候的查看及分析处理: ...
- 条件随机场CRF简介
http://blog.csdn.net/xmdxcsj/article/details/48790317 Crf模型 1. 定义 一阶(只考虑y前面的一个)线性条件随机场: 相比于最大熵模型的输 ...
- D&F学数据结构系列——前驱和后继
前驱和后继 本文所述为二叉排序树的前驱和后继,如果想了解二叉排序树的概念,可以参考我的博文http://www.cnblogs.com/sage-blog/p/3864640.html 给定一个二叉查 ...
- 2014多校第四场1006 || HDU 4902 Nice boat (线段树 区间更新)
题目链接 题意 : 给你n个初值,然后进行两种操作,第一种操作是将(L,R)这一区间上所有的数变成x,第二种操作是将(L,R)这一区间上所有大于x的数a[i]变成gcd(x,a[i]).输出最后n个数 ...
- opencv face-detection 代码分析 (1)人脸识别后的数据
2014,3,16 老师的工作建议如下: 1. 与四民沟通下,把openCV这边的源代码和调用接口发给四民同时抄送给我. 2. 根据openCV的实时检测结果,实现对屏幕的调整(下周一前基本实 ...
- 如何修改Linux系统的TTL值
在网络中,黑客如果用ping命令去探测 一个主机,根据TTL基数可以推测操作系统的类型.对于一个没有经过任何网关和路由的网络, 直接ping对方系统得到的TTL值,被叫做"TTL基数&qu ...
- php脚本的执行过程(编译与执行相分离)
php脚本的执行过程(编译与执行相分离) 深入理解PHP代码的执行的过程 PHP程序的执行流程 Apache + PHP 的并发访问
- 针对安卓java入门:类和对象
定义类 class Dog { String name; int age; void jump(){ } } 生成对象: public class Test { public static void ...