一、position

position属性：指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

1、fixed值

fixed值：生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

############################

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div onclick="GoTop();" style="height: 50px; width: 50px; background-color: black; color: white;

    position: fixed;

    bottom:20px;

    right: 20px;

    ">返回顶部</div>

    <div style="height: 5000px; background-color: #dddddd"></div>

    <script>

        function GoTop() {

            document.body.scrollTop = 0;

        }

    </script>

</body>

</html>

###############################

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .pg-header{

            height: 48px;

            background-color: black;

            color: #dddddd;

            position: fixed;

            top: 0px;

            right: 0;

            left: 0px;

        }

        .pg-body{

            background-color: #dddddd;

            height: 5000px;

            margin-top: 50px;

        }

    </style>

</head>

<body>

    <div class="pg-header">头部</div>

    <div class="pg-body">内容</div>

</body>

</html>

2、absolute、relative组合使用

absolute：

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative：

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

#############################
##relative在父标签中，absolute在子标签中；
##absolute是相对于父标签来定位的；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div style="position:relative; width: 500px; height: 200px; border: 1px solid red; margin: 0 auto;">
        <div style="position: absolute; left: 0; bottom: 0; width: 50px; height: 50px; background-color: black;"></div>
    </div>

</body>
</html>

3、层级显示

##代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="z-index: 2; position: fixed; top: 50%; left: 50%;

    margin-left: -250px; margin-top: -200px; background-color: white; height: 400px; width: 500px;">

        <input type="text">

    </div>

    <div style="z-index: 1; position: fixed; background-color: black;

    top: 0;

    bottom: 0;

    right: 0;

    left: 0;

    opacity: 0.4;"></div>

    <div style="height: 5000px; background-color: green;">最底层页面</div>

</body>

</html>

##

opacity: 0.4;    //透明度

z-index: 1;    //层级顺序，值小的层在下面

4、css之position的更多相关文章

  1. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  2. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  3. 十步图解CSS的position

    CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in ...

  4. css 之position用法详解

    css  之position用法详解: http://www.jb51.net/web/77495.html

  5. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  6. CSS的position(位置)

    position: 位置,absolute绝对位置,相对于浏览器边界的位置:relative相对位置,相对于它本应该出现的位置.fixed:固定位置,它不会随着滚动. 设置好position之后,就可 ...

  7. CSS的position设置

    CSS的position设置: <%@ page language="java" contentType="text/html; charset=UTF-8&quo ...

  8. 关于CSS 的position定位问题

    对于初学者来说,css的position定位问题是比较常见的.之前搞不清楚postion定位是怎么回事,排版一直歪歪斜斜的,老是排不好 css的定位一般来说,分为四种: position:static ...

  9. 《css定位 position》课程笔记

    这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...

  10. css的position中absolute和fixed的区别

    fixed:固定定位 absolute:绝对定位 区别很简单: 1.没有滚动条的情况下没有差异 2.在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动 常用场 ...

随机推荐

  1. AsyncTask源代码解析

    快要毕业了.近期在阿里巴巴校园招聘面试,一面过了,感觉挺轻松,可能是运气好.面试官感觉比我腼腆一些.我俩从android绕到了spring mvc 到数据库悲观锁 到linux 然后又会到了andro ...

  2. 自己定义struts2中action类型转换器

    DateAction.java中代码例如以下: package com.itheima.action; import java.util.Date; public class DateAction { ...

  3. android等待旋转圆圈动画

    先创建一个动画的xml文件例如以下 <? xml version="1.0" encoding="utf-8"?> <animation-li ...

  4. pandas-事例练习

    补充: DataFrame.dropna(axis=0, how='any', thresh=None, subset=None, inplace=False) 功能:根据各标签的值中是否存在缺失数据 ...

  5. API网关如何实现对服务下线实时感知

    上篇文章<Eureka 缓存机制>介绍了Eureka的缓存机制,相信大家对Eureka 有了进一步的了解,本文将详细介绍API网关如何实现服务下线的实时感知. 一.前言 在基于云的微服务应 ...

  6. Python list 和 str 互转

    一.list转字符串 命令:''.join(list)其中,引号中是字符之间的分割符,如“,”,“;”,“\t”等等如:list = [1, 2, 3, 4, 5]''.join(list) 结果即为 ...

  7. 【转】Android IDA 动态调试最完善攻略，跨过各种坑

    前提条件和运行环境一定要写清楚,不然会有很多坑,坑死人. (1)IDA 是最新的7.0版本  (2) JDB 使用Java安装目录下的 (3)系统是win10 使用命令窗口时有很大的差别 (4)手机是 ...

  8. CAS 单点登录原理

    访问服务: 浏览器发送请求访问应用系统 定向认证: 应用系统重定向用户请求到 SSO 服务器. 用户认证:用户身份认证. 发放票据: 认证通过后,SSO 服务器会产生一个随机的 Service Tic ...

  9. 10个必需的iOS开发工具和资源

    本文转载至 http://mobile.51cto.com/iphone-418166.htm 界面总不是一件很容易事,尤其是iPhone/iPad的界面,做过iOS开发的程序员,一定会感到开发iPh ...

  10. Hibernate总结（转）

    原文:http://blog.csdn.net/yuebinghaoyuan/article/details/7300599 那我们看一下hibernate中整体的内容: 我们一一介绍其中的内容. H ...