布局 position

position : 设置定位方式

跟『定位』相关的有一些属性，最重要的一个是『position』，它主要是设置『定位方式』。

而定位方式最重要的是设置『参照物』.

配合 position 使用的有这些属性:

属性名	值	描述
top		元素上边缘距离参照物边缘的距离
right		元素右边缘距离参照物边缘的距离
bottom		元素下边缘距离参照物边缘的距离
left		元素左边缘距离参照物边缘的距离
z-index

position	static	静态的，是元素默认的，比如block是换行，inline是同行。
	relative	相对定位
	absolute	绝对定位
	fixed	固定定位

top,right,bottom,left,z-index 必须给position设置，如果不是一个定位元素，设置这些属性是不起效果的。

top/right/bottom/left

设置『元素边缘』到『参照物边缘』的距离

绿色线框区域为参照位置。

为什么不用x,y 定位，而选用 top right bottom left来定位呢？如果要把红色区域定位到右下角，还得计算红色区域的大小。

举个栗子:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>位置</title>

    <style type="text/css">

    .sample{

        background-color: pink;

    }

    .sample{

        position: absolute;

    }

    /* 上边缘距离参照物(页面顶部) 距离30px, 左边缘距离参照物(页面左边) 距离30px */

    .sample{

        top: 30px;

        left: 30px;

    }

    /* 下边缘距离参照物(页面底部) 距离30px, 右边缘距离参照物(页面右边) 距离30px */

    .sample{

        bottom: 30px;

        right: 30px;

    }

    </style>

</head>

<body>

<div class="sample">sample</div>

</body>

</html>

z-index

配合position 来使用的，设置元素在『Z轴』上的排序

z-index 默认是 0

是不是z-index 越大的就越放在上面呢？不一定，因为 z-index 还有个『栈』的概念。

在父元素的 z-index 相等默认为 0 的情况下，子元素 z-index越大的越靠近上方。而当父元素本身比较小时，子元素再大也是小于其他 z-index 较大的元素的子元素。

右边的图这就相当于两副扑克牌摞在一起，下面牌盒里的牌，无论怎么内部变换位置都不可能高于上面牌盒中的牌。

举个栗子：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>z-index</title>

    <style type="text/css">

    .sample0,.sample1{

        position: absolute;

        width: 200px;

        line-height: 150px;

        text-align: center;

    }

    .sample0{

        background-color: #ff0;

    }

    .sample0{

        z-index: 1;

    }

    .sample1{

        background-color: pink;

    }

    .sample1{

        top: 100px;

        left: 100px;

    }

    .sample1{

        z-index: 99;

    }

    .container0,.container1{

        position: relative;

    }

    .container0{

        z-index: 99;

    }

    .container1{

        z-index: 1;

    }

</style>

</head>

<body>

<div class="container0">

    <div class="sample0">sample 0</div>

</div>

<div class="container1">

    <div class="sample1">sample 1</div>

</div>

</body>

</html>

两个绝对定位的元素， z-index 值大的元素一定在 z-index 值小的元素的上方。 ×

position: relative 相对定位

相对定位的元素，仍在文档流中。在文档流中就是按照文档流中的顺序进行排列，即块级元素换行排列，行级元素同行排列。

相对定位的元素，参照物为元素本身。

position : relative 使用最多的场景: 绝对定位元素的参照物

举个栗子：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>position_relative</title>

    <style type="text/css">

    .div1,.div2,.div3{

        width: 300px;

        height: 80px;

        margin:10px 10px 0px 10px;

    }

    .div1{

        background-color:#ff9e3e;

    }

    .div2{

        background-color:#ff7b2e;

        position: relative;

/*        top: 10px;

        left: 20px;*/

        color: white;

        font-family: "Microsoft YaHei";

        font-size: 22px;

    }

    .div3{

        background-color:#ff9e3e;

    }

    </style>

</head>

<body>

<div class="div1"></div>

<div class="div2">position: relative;</div>

<div class="div3"></div>

</body>

</html>

去掉对top 和 left 的注释后:

position: absolute 绝对定位

绝对定位的元素，默认宽度为内容宽度

绝对定位的元素，脱离文档流

绝对定位的元素，参照物为第一个定位祖先 / 根元素

绝对定位元素的参照物是他的父元素。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>相对定位</title>

    <style type="text/css">

    .container{

        width: 400px;

        line-height: 2;

        border: 1px dashed #aaa;

        position: relative;

    }

    .sample{

        background-color: pink;

    }

    .sample{

        position: absolute;

    }

    .sample{

        bottom: 10px;

        left: -30px;

    }

    </style>

</head>

<body>

<div class="container">

        <div>相对定位元素的前序元素</div>

        <div class="sample">sample</div>

        <div>相对定位元素的后序元素</div>

</div>

</body>

</html>

常用场景: 布局 - 轮播头图

举个栗子

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>轮播头图</title>

    <style type="text/css">

    .is{position: relative;width: 480px;}

    .is.img{display: block;}

    .is .title{position: absolute;bottom: 0;

        margin: 0;width: 100%;line-height: 45px;

        background-color: #000;opacity: 0.7;}

    .is .controls{position: absolute;bottom: 18px;

        right: 10px;line-height: 10px;}

    .is .controls span{display: inline-block;

        width: 10px;margin: auto 1px; height: 10px;

        border-radius: 10px; background-color: gray;}

    .is .controls span.cur{background-color: #fff;}

    </style>

</head>

<body>

<div class="is">

<img src="红茶_b.jpg">

<p class="title"><a href="asfas">老徐视线：北京潮女出门逛街不穿内衣</a></p>

<div class="controls">

<span></span><span class="cur"></span><span></span><span></span><span></span>

</div>

</div>

</body>

</html>

position: fixed 固定定位

默认宽度为内容宽度

脱离文档流，不在占据原来的位置，它下面的元素会占据他的位置。

参照物为『视窗』

举个栗子:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>fixed定位</title>

    <style type="text/css">

     .container{

         /*position: relative;*/

         border: 1px dashed red;

         width: 400px;

         line-height: 2;

         margin: 200px;

         height: 1000px;

     }

     .sample{

         background-color: pink;

     }

     .sample{

         position: fixed;

         bottom: 0;

         left: 10px;

     }

    </style>

</head>

<body>

<div class="container">

        <div>绝对定位元素的前序元素</div>

        <div class="sample">sample</div>

        <div>绝对定位元素的后序元素</div>

</div>

</body>

</html>

粉红色div，display:fixed 相对于视窗底部0, 左侧10px。固定在那个位置不动。

布局--固定顶栏

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>固定顶栏</title>

    <style type="text/css">

    body{ margin: 0;line-height: 1.8; }

    body{padding-top: 50px;}

    .top{

        height: 30px;

        background-color: pink;

        color: #fff;

    }

    .top{

        position: fixed;top: 0;width: 100%;height: 50px;

    }

    .main{

        background-color: #bebebe;

        height: 1000px;

    }

    </style>

</head>

<body>

    <div class="top">top bar</div>

    <div class="main">main content area</div>

</body>

</html>

也可以用在回到顶部，购物车图标等位置.

布局--遮罩

核心代码

<div class="mask"></div>

.mask{position: fixed;top: 0;left: 0;z-index: 999;width: 100%;height: 100%;}

举个栗子：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>遮罩</title>

    <style type="text/css">

        .mask{

            position: fixed;

            top: 0;

            left: 0;

            z-index: 999;

            width: 100%;

            height: 100%;

            background-color: #000;

            opacity: 0.3;

        }

        .content{

            height: 3000px;

        }

    </style>

</head>

<body>

    <div class="mask"></div>

    <div class="content">content area</div>

</body>

</html>

布局: 三行自适应布局

顶栏：固定在窗口最上面的。

foot：固定在窗口最下面的。

内容区：是自适应的。

滚动条：出现在内容区。

核心代码:

<div class="head">head</div>

<div class="body">body</div>

<div class="foot">foot</div>

.head{

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100px;

    }

    .body{

        position: absolute;

        top: 100px;

        left: 0;

        bottom: 100px;

        right: 0;

    }

    .foot{

        position: absolute;

        bottom: 0;

        left: 0;

        width: 100%;

        height: 100px;

    }

布局--两列布局

块级元素同行显示

在文档流中(如果不在文档流中，foot就会占据 main 区域位置)

怎么做呢？需要用到float

布局 position的更多相关文章

HTML之布局position理解
HTML中的布局,一个比较难以理解的概念,就是position了,W3C上的解释,position有如下几种: 1. static,默认值,也就是在样式中不指定position 2. fixed 3. ...
学习CSS布局 - position例子
position例子通过具体的例子可以帮助我们更好地理解“position”.下面是一个真正的页面布局. 结果: 代码如下: <!DOCTYPE html> <html lang= ...
学习CSS布局 - position
position 为了制作更多复杂的布局,我们需要讨论下 position 属性. 它有一大堆的值,名字还都特抽象,别提有多难记了. 让我们先一个个的过一遍,不过你最好还是把这页放到书签里. 先看下运 ...
Web开发中常用的定位布局position
定位布局就是为开发提供了更好的布局方式,可以根据需求给相应的模块设定相应位置,从而使界面更佳丰富,代码更佳完美. position是CSS中非常重要的一个属性,通过position属性,我们可以让元素 ...
定位布局—position
1. position的属性 1.1position:static 默认位置,没有定位效果 1.2 position:relative 相对定位,不会脱离文档流,相对于原来位置的变化 <!DOC ...
CSS的定位布局(position)
定位 static(默认值) 没有开启定位 relative 相对定位的性质包含块(containing block)概念没有开启定位时包含块就是当前元素最近的祖先块元素开启绝对定位后的元素包含 ...
[浅谈CSS核心概念] CSS布局模型：float和position
1.流动模型 HTML元素在默认情况下都是按照"流动模型"进行布局的,网上也有人称之为"普通流"."文档流"之类的.这种布局模式的特点在于: ...
CSS篇-dispaly、position、定位机制、布局、盒子模型、BFC
display常用值参考链接英文参考链接中文 // 常用值 none:元素不显示 inline:将元素变为内联元素,默认 block:将元素变为块级元素 inline-block:将元素变为内联块级 ...
CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

随机推荐

C语言学习003:Hello 指针
在C中使用指针的原因避免副本在函数调用的时候,可以只传递数据的引用,而不用传递数据数据共享两段代码可以同时操作同一份数据,而不是两份独立的副本使用指针读写数据 #include <st ...
web前端学习笔记---实现雪花飘落的效果
看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈旧了,那么就学者改掉吧. 包括: 1.对le ...
LINQ使用Lambda表达式选择几列
学习LINQ的Lambda的表达式,尝试从数据集合中,选择其中几列. 创建一个model: source code: namespace Insus.NET.Models { public class ...
Mysql日期统计函数简介
NOW() 返回当前的日期和时间 CURDATE() 返回当前的日期 CURTIME() 返回当前的时间 DATE() 提取日期或日期/时间表达式的日期部分 EXTRACT() 返回日期/时间按的单独 ...
使用VS Code 开发.NET Core 应用程序部署到Linux 跨平台
使用VS Code 开发.NET Core 应用程序部署到Linux 跨平台. 前面讲解了VSCode开发调试 .NET Core.都只是在windows下运行. .NET Core真正的核心是跨平 ...
membership 启用 roleManager 抛出异常：未能加载文件或程序集MySql.Web
在vs2013中新建一个ASP.NET MVC 4 WEB 应用程序,使用“基本”模板.web.config中默认使用forms认证方式,并添加了membership的配置. <roleMana ...
Android调用系统自带的设置界面
Android有很多系统自带的设置界面,如设置声音,设置网络等. 在开发中可以调用这些系统自带的设置界面. 点击以下列表中的选项,就可以调出相应的系统自带的设置界面. 如点击“无线和网络设置”,可以调 ...
用Supervisord管理Python进程
http://feilong.me/2011/03/monitor-processes-with-supervisord Supervisord是用Python实现的一款非常实用的进程管理工具,类似于 ...
【转】Android世界的Swift - Kotlin语言
最近Oracle又在和Google撕的厉害,才知道还有这么Kotlin在Android像Swift在Mac的地位一说. Kotlin是一门与Swift类似的静态类型JVM语言,由JetBrains设计 ...
EasyUI-扩大在DataGrid显示次网格的行
一.下载并引用:datagrid-detailview.js脚本文件二.添加UrlInfo控制器,添加Index页面代码如下: @{ Layout = null; } <!DOCTYPE ht ...

布局 position

布局 position的更多相关文章

随机推荐

热门专题