1. position的属性

1.1position:static

默认位置,没有定位效果

1.2 position:relative

相对定位,不会脱离文档流,相对于原来位置的变化

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position</title>
<style>
.wrap{
width: 300px;height: 150px;
margin: 20px;border: 2px solid black;
}
.box1{
/*position:relative;top:-10px;right:30px;*/
float: left;
width: 100px;height: 100px;
margin: 20px ;border: 2px solid #3399ff;
background: lightskyblue;
}
.box2{
/*position:relative;top:-10px;right:30px;*/
float: left;
width: 100px;height: 100px;
margin: 20px auto;border: 2px solid red;
background: #d0e9c6;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>

(1)原来的



(2)若只去掉box1中的注释,即相对原来的位置,向上移10px,向左移动30px,但是发现box2的位置还是没有变化,说明box1没有脱离文档流,而占据的是原来的位置



(3)若只去掉box1中的注释,发现box1的位置没有改变,box2层叠到box1上,且对box1的布局没有影响

1.3 position:fixed

相对于窗口定位,固定位置,会脱离文档流

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position</title>
<style>
.wrap{
width: 300px;height: 150px;
margin: 20px;border: 2px solid black;
}
.box1{
position:fixed;top:60px;
float: left;
width: 100px;height: 100px;
margin: 20px;border: 2px solid #3399ff;
background: lightskyblue;
}
.box2{
float: left;
width: 110px;height: 110px;
margin: 20px;border: 2px solid green;
background: #d0e9c6;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
</body>
</html>



margin居中和fixed固定定位的问题:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position</title>
<style>
.wrap{
width: 300px;height: 200px;
margin: 20px;border: 2px solid black;
}
.box1{
width: 100px;height: 100px;
margin: 10px auto;border: 2px solid #3399ff;
background: lightskyblue;
}
.box2{
width: 50px;height: 50px;
margin: 10px auto;border: 2px solid green;
background: #d0e9c6;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
</body>
</html>

(1)原来的



(2)在box1中添加:position:fixed;,发现box1不再居中了,auto无效了,并且脱离了文档流。



(3)在box1中添加:position:fixed;left:0;此时fixed产生的效果就可见了

1.4 position:absolute

绝对定位,会脱离文档流

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position</title>
<style>
.wrap{
width: 300px;height: 150px;
margin: 20px;border: 2px solid black;
}
.box1{
float: left;
width: 100px;height: 100px;
margin: 20px;border: 2px solid #3399ff;
background: lightskyblue;
}
.box2{
float: left;
width: 110px;height: 110px;
margin: 20px;border: 2px solid green;
background: #d0e9c6;
}
.box3{
/*position:absolute;left:10px;*/
width: 50px;height: 50px;
margin: 10px;border: 2px solid red;
background: lightgoldenrodyellow;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">1
<div class="box3">3</div>
</div>
<div class="box2">2</div>
</div>
</body>
</html>

(1)原来的



(2)父级属性都是默认的

去掉box3的注释,即为box3添加绝对定位,由于父级(这里的父级都指父级及以上)都是默认的static,则会相对文档定位(下滑位置会变动,不是浏览器定位),加上左边距10px,即距离浏览器窗口左侧20px。



(3)父级属性是relative

去掉box3的注释,在box1(它的父级)添加:position:relative,相对原来位置不变。那么box3会距离box1的左侧20px



如果是在wrap(它的爷爷)添加:position:relative,上一级(box1)不添加,发现会距离wrap的左侧20px,如下所示。说明拥有absolute属性的块会以父级的作为定位的参照物。



(4)父级属性是absolute

去掉box3的注释,在box1添加:position: absolute;left:10px;。由于box1的父级都是默认值,则会相对窗口左侧(10+10)px的距离,且脱离了文档流,而它的子级box3是以自己作为定位参照物,覆盖了box2的一部分。



(5)父级属性是fixed

去掉box3的注释,在box1添加:position:fixed;top:40px;left:60px;,则box1相对于窗口定位,不管如何滑动都是距离上方40px,距离左侧60px,那么box3就相对于box1定位,都脱离了文档流,box2才会向左边挤。

参考链接:https://blog.csdn.net/FungLeo/article/details/50056111

定位布局—position的更多相关文章

  1. Web开发中常用的定位布局position

    定位布局就是为开发提供了更好的布局方式,可以根据需求给相应的模块设定相应位置,从而使界面更佳丰富,代码更佳完美. position是CSS中非常重要的一个属性,通过position属性,我们可以让元素 ...

  2. CSS的定位布局(position)

    定位 static(默认值) 没有开启定位 relative 相对定位的性质 包含块(containing block)概念 没有开启定位时包含块就是当前元素最近的祖先块元素 开启绝对定位后的元素包含 ...

  3. CSS之定位布局(position,定位布局技巧)

    css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...

  4. 网页万能排版布局插件,web视图定位布局创意技术演示页

    html万能排版布局插件,是不是感觉很强大,原理其实很简单,不过功能很强大哈哈,大量节省排版布局时间啊! test.html <!doctype html> <html> &l ...

  5. css定位 与position

    本文同时发表于本人个人网站 www.yaoxiaowen.com 在正式讨论position之前,我们需要知道几个概念. 块元素:独占一行的元素.比如div,h1~h6,p等,它是自带换行的. 内联元 ...

  6. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  7. 写给后端的前端笔记:定位(position)

    写给后端的前端笔记:定位(position) 既然都写了一篇浮动布局,干脆把定位(position)也写了,这样后端基本上能学会css布局了. 类别 我们所说的定位position主要有三类:固定定位 ...

  8. css之定位(position)

    1.什么是定位: css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则 ...

  9. html5 css练习 定位布局

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

随机推荐

  1. 克隆DOM元素 ele.cloneNode();

    var nodePrev = p.children[j].cloneNode(true); var nodeNext = p.children[j + 1].cloneNode(true);

  2. 正则表达式 \b

    引用网上一段话: \b 是正则表达式规定的一个特殊代码(好吧,某些人叫它元字符,metacharacter),代表着单词的开头或结尾,也就是单词的分界处.虽然通常英文的单词是由空格,标点符号或者换行来 ...

  3. git 设置 .gitignore 为全局global + 配置.gitignore为全局后不生效解决办法

    outline 什么是 .gitignore 以及 .gitignore 的作用,这里不做赘述,自行网上查阅. 设置 .gitignore 为全局生效 懒得自己逐行敲忽略规则的话,建议移步:https ...

  4. django博客项目11

    .....................

  5. mysql 中sum (if()) 用法

    原表: id    fenlei     time 1      分类1      20130316 2      分类2      20130316 3      分类3      20130317 ...

  6. mysql大数据查询优化

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  7. [TensorFlow] tf.nn.softmax_cross_entropy_with_logits的用法

    在计算loss的时候,最常见的一句话就是tf.nn.softmax_cross_entropy_with_logits,那么它到底是怎么做的呢? 首先明确一点,loss是代价值,也就是我们要最小化的值 ...

  8. 吴超老师课程---ZooKeeper介绍和集群安装

    1.ZooKeeper    1.1 zk可以用来保证数据在zk集群之间的数据的事务性一致.2.如何搭建ZooKeeper服务器集群    2.1 zk服务器集群规模不小于3个节点,要求各服务器之间系 ...

  9. SSO 单点登录的实现原理

    单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任.单点登录在大型网站里使用得 ...

  10. myelcipse中SVN进行代码更新和提交

    感谢博主(John的专栏)的奉献,http://blog.csdn.net/tangzenglei/article/details/50175639