4、css之position
一、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的更多相关文章
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- 十步图解CSS的position
CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in ...
- css 之position用法详解
css 之position用法详解: http://www.jb51.net/web/77495.html
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- CSS的position(位置)
position: 位置,absolute绝对位置,相对于浏览器边界的位置:relative相对位置,相对于它本应该出现的位置.fixed:固定位置,它不会随着滚动. 设置好position之后,就可 ...
- CSS的position设置
CSS的position设置: <%@ page language="java" contentType="text/html; charset=UTF-8&quo ...
- 关于CSS 的position定位问题
对于初学者来说,css的position定位问题是比较常见的.之前搞不清楚postion定位是怎么回事,排版一直歪歪斜斜的,老是排不好 css的定位一般来说,分为四种: position:static ...
- 《css定位 position》课程笔记
这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...
- css的position中absolute和fixed的区别
fixed:固定定位 absolute:绝对定位 区别很简单: 1.没有滚动条的情况下没有差异 2.在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动 常用场 ...
随机推荐
- Python+Selenium框架 ---一个类文件多个测试方法情况下测试固件的写法
我们测试中,肯定需要,打开一个页面,然后测试这个页面的多个用例,才关闭这个页面,去测试其他页面,在unittest是有相关测试固件方法去支持这种行为.请看下面 # coding=utf-8 impor ...
- kubernetes容器编排之定义环境变量以及通过downwardapi把pod信息作为环境变量传入容器内
系列目录 在学习docker的时候,大家可能经常看到不少示例在docker run的时候指定环境变量(比如wordpress的docker示例就是通过环境变量传入账户和密码到容器内).这里之所以经常用 ...
- C# 比较两个数组中的内容是否相同的算法
这里要比较的是两个数组中的内容是否相同,以int数组为例 int[] Arraya=new[] {1,2,3,4,5} int[] Arrayb=new[] {5,3,2,1,4} 以上两个数组内的值 ...
- ffmpeg api升级到3.3 api变化
void av_free_packet(AVPacket * pkt) Use void av_packet_unref(AVPacket * pkt) Wipe the packet. Unref ...
- 使用 lstat 函数获取文件信息
前言 在之前的文章中,描述过如何用 fcntl 函数改变文件的状态标记.但,文件还有很多信息,如文件类型,权限设置,设备编号,访问时间等等.如果要获取这些信息,则使用函数 lstat 可以轻松达到这个 ...
- 第 1 章 第 2 题 空间敏感排序问题 位向量实现( bitset位向量 )
问题分析 在上篇文章中,给出了使用C语言中经典位运算符来实现位向量的方法.而本文,将介绍使用C++中的bitset容器来实现位向量的方法. 实现 // 请包含bitset头文件 #include &l ...
- android开发——自己定义相机(Camera)开发总结
近期这段时间我一直在开发自己定义相机.谷歌了些网上的demo.发现有非常多各种各样的问题.终于还是从API的camera类開始学习,进行改进. 以下对之前的实现进行一些总结. 官方camera API ...
- wcf服务发布时,目录中没有文件生成
1.删除原有的配置文件
- 九度OJ 1107:搬水果 (贪心)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5190 解决:1747 题目描述: 在一个果园里,小明已经将所有的水果打了下来,并按水果的不同种类分成了若干堆,小明决定把所有的水果合成一堆 ...
- emWin 移植 - 基于红牛开发板
一直想利用所学的东西自己设计一个精致一些的作品,手头正好有一块红牛开发板,就先用它来写一些软件,熟悉一下过程和一些想法的可行性.首先当然是选择一个操作系统了,对比了几种之后选择了emWin.那就移植一 ...