css定位法

<style type="text/css">
.box{
    width:199px;
    height:199px;
}
.box:first-of-type{
    background-color:red;
    position:absolute;/* 绝对定位 */
    top:0;
    left:0;
    z-index:21122312;
}
.box:last-of-type{
    background-color:green;
    position:absolute;/* 定位 */
    top:101px;
    left:101px;
    z-index:2112231;/* 谁大谁在前面 */
}
/* 以浏览器为位置 */
.a{
    width:299px;
    height:100px;
    background-color:pink;
    position:fixed;/* 固定定位 */
    left:500px;
    top:329px;
}
.b{
    width:299px;
    height:100px;
    background-color:black;
    position:relative;/*  相对定位 */
    left:0px;
    top:29px
}
.c{
    width:200px;
    height:200px;
    position:fixed;/* 固定定位 */
    border:1px solid red;
    left:50px;
    top:329px;
}

</style>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="a"></div>
    <div class="c">
        <div class="b"></div>
    </div>
    <div class="box"></div>
</body>
</html>
时间： 2024-10-29 19:10:22

css定位法的相关文章

转载：CSS实现三栏布局的四种方法示例

转载网址:http://www.jb51.net/css/529846.html 前言 其实不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具体的介绍了三栏布局的四种方法,并介绍了它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 HTML代码如下: <div class="left&quo

CSS总结（七）——常见的两栏、三栏布局

一.两栏布局 — 左栏固定宽度,右栏宽度自适应 1. 左浮动+margin <div class=“left”></div> <div class=“main”></div> css:  .left{width:200px;float:left;} .main{margin-left:200px;} ps:    IE6中可能出现双margin的bug,可以通过display:inline来解决 2.  绝对定位 + margin-left (兼容性好) &

css之两栏布局左侧固定右侧高度自适应

css两栏布局之左侧固定右侧高度自适应 先看这样的html+css结构: .main { width: 900px; overflow:hidden; margin: 0 auto; border:1px solid #000; } .left { width: 600px; float:left; background: #ccb; } .right { float:left; width: 300px; background: #acf; } <div class="main"

使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年网易内推前端工程师面试的时候也被问到. 我这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 1. 基于传统的position和margin等属性进行布局 这里也分为三种方法,分别为绝对定位法,圣杯布局,自身浮动法. 1).绝对定位法 绝对定位法原

使用CSS使内容垂直居中的N中方法。

使用css+div使页面内容水平居中的方法大家并不陌生,那么如何使内容垂直居中呢? OK,下面进入正题,不如我们使用做高中数学题时经常用的思想:分情况讨论. 1.当待垂直居中的DIV高宽为已知时: 1.1绝对定位法: CSS: .middle-div{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px } .parent-div{ position:relitive;

css 垂直水平居中总结

前言: 垂直居中有很多方式,我们要做的不是写出完美代码,而是在合适的情况下根据需求选择合适方式. 主要方式: line-height 绝对定位 表格 display:table-cell 主要需求: 固定宽高 不固定宽高 主要兼容: ie8+  主流浏览器 ie6,7 行高 1. 利用行高与高度相同,实现单行文本居中 缺点:只能是单行文本 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title>

（转转转）使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年网易内推前端工程师面试的时候也被问到. 我这里主要分为两大类,一类是基于position传统的实现,一类是基于CSS3新特性弹性盒模型布局实现. 1. 基于传统的position和margin等属性进行布局 这里也分为三种方法,分别为绝对定位法,圣杯布局,自身浮动法. 1).绝对定位法 绝对定位法原理是将左右两边使用absolute定位,因为绝对定位使其脱离文档流,后面的center会自然流动到他们上面,然后使用margin

Css三栏布局自适应实现几种方法

Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏布局自适应: 代码如下 复制代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>绝对定位法</title> <style>  .pa

使用CSS使内容垂直居中的N中方法

用css+div使页面内容水平居中的方法大家并不陌生,那么如何使内容垂直居中呢? OK,下面进入正题,不如我们使用做高中数学题时经常用的思想:分情况讨论. 1.当待垂直居中的DIV高宽为已知时: 1.1绝对定位法: CSS: .middle-div{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px } .parent-div{ position:relitive;