布局 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)即行内格 ...

随机推荐

[转] MySql 优化大数据优化
一.我们可以且应该优化什么? 硬件操作系统/软件库 SQL服务器(设置和查询) 应用编程接口(API) 应用程序 ------------------------------------------ ...
参考例子，学习Func<T, TResult>委托
这些天,开发ASP.NET MVC,其间有查找资料,发现一个全新的Func<T, TResult> 委托.让我们在开发时,节省与简化很多. 在开发过程中,我们需要把一个泛型List< ...
jQuery的Ajax请求数据时type无法使用GET
写一个ASP.NET MVC例子,它是使用jQuery的$.Ajax来呼叫控制器的数据. 创建一个视图: 运行结果: 一切正常,但是本例子我们只是获取数据,并没有做任何数据POST上传至控制器,我们尝 ...
Ajax学习笔记2之使用Ajax和XML
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Using Ajax wit ...
查看SQL Server多实例的版本
通过 select @@version 查看当前的 SQL Server 安装的版本: 结果返回的是 SQL Server 2008 R2 (SP1),可安装的明明是 SQL Server 2012 ...
Scalaz（37）－ Free ：实践－DB Transaction free style
我一直在不断的提示大家:FP就是Monadic Programming,是一种特殊的编程风格.在我们熟悉的数据库编程领域能不能实现FP风格呢?我们先设计一些示范例子来分析一下惯用的数据库编程过程: i ...
【FOL】第九周
不知不觉又是三周过去了. 这几周忙了一下,其他时间全都在搞服务端,简直是酸爽的不行...不过还好出了些成果. 目前服务端有: 1.版本服务:游戏版本更新 2.账号服务:用户身份验证,返回各种连接(代理 ...
String类型中ToString hashCode equals compareTo等方法的经典实现
private final char value[]; private int hash; // Default to 0 public String(String original) { this. ...
[iOS] 建立与使用Framework
[iOS] 建立与使用Framework 前言使用XCode开发iOS项目时,开发人员可以将可重用的程序代码,封装为Library或是Framework来提供其他开发人员使用.这两种封装方式在使用的 ...
Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》
<Web 开发最有用的50款 jQuery 插件集锦>系列文章向大家分享最具创新的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插 ...

布局 position

布局 position的更多相关文章

随机推荐

热门专题