css中的四个不同的position设置
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/* Positioning */
css 的 position 属性是用来设置元素的位置的,它还能设置一个元素出现在另一个元素的下层
元素能用 top,bottom,left 和 right 属性设置位置, 但是在默认情况下是不管用的,除非先设置了position属性 HTML 元素的位置默认是设置为静态(static)的, 位置设置为静态的元素的位置通常是根据正常的页面流向(flow)设置的
位置为静态的元素是不能被 top,bottom,left,right 影响的 共有四个不同的position设置方法 .fixed 采用fixed position 的元素位置的设置相对于浏览器窗口
An element with fixed position is positioned relative to the browser window.
窗口滚动它也不会移动
It will not move even if the window is scrolled: .relative 相对位置指的是相对于它自己正常的位置 .absolute 相对于第一个(紧包着的,最里层的)父元素
An absolute position element is positioned relative to
the first parent element that has a position other than static.
If no such element is found, the containing block is <html>: .overlapping 通过设置 position 和 z-index
* {
margin: 0px;
/*padding: 0px;*/
}
.pos_fixed {
position: relative; /*A relative positioned element is positioned relative to its normal position.*/
left: 10px;
top:10px;
width: 100px;
height: 100px;
border: 1px solid seagreen;
}
h2.pos_left {
position: relative;
left: -20px;
border: 1px solid crimson;
}
h2.pos_right {
position: relative;
left: 20px;
border: 1px solid crimson;
}
</style>
</head>
<body>
<div class="pos_fixed">
hello everyone.
</div>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>
<p>Relative positioning moves an element RELATIVE to its original position.</p>
<!--<progress>progress</progress>-->
</body>
</html>
css中的四个不同的position设置的更多相关文章
- CSS中设置DIV垂直居中的N种方法 兼容IE浏览器
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- HTML CSS 中DIV内容居中汇总
转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还 ...
- CSS中设置div垂直居中
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- css 中 div垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- css中position与z-index
position属性 在css中,position属性用来控制元素的位置信息,其取值共有4种,即static.relative.absolute.fixed. 静态定位(static) 若没有指定po ...
- 装载：对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...
随机推荐
- Python学习笔记——集合类型
集合类型有两种不同的类型——可变集合(set)和不可变集合(frozenset) 可变集合不是可哈希的,不能用作字典的键,也不能用做其他集合中的元素 不可变集合是有哈希值的,能被用做字典的键或者是作为 ...
- ANDROID_HOME on Mac OS X
Where the Android-SDK is installed depends on how you installed it. If you downloaded the SDK throug ...
- JSONP 理解 和 实例 讲解
1.什么是jsonp 1.1 同源策略 浏览器同源策略的限制,XmlHttpRequest只允许请求当前源(相同域名.协议.端口)的资源. -1)jsonp只支持get请求 -2)不受同源策略限制 , ...
- Extjs 学习总结-Ext.define自定义类
本教程整理了extjs的一些基本概念及其使用,包括自定义类(Ext.define).数据模型.代理等.本节介绍使用Ext.define自定义类 使用Ext.define自定义类 1. 首先看看js中自 ...
- [NHibernate]视图处理
目录 写在前面 文档与系列文章 视图 一个例子 总结 写在前面 前面的文章主要讲了对物理数据表的操作,当然了Nhibernate同样可以操作视图,本文将讲nhibernate对视图操作的种种. 文档与 ...
- CSS隐藏多余文字的几个方法
通常偏移掉字体的方式是 (1)使用text-indent:-9999px; 可是他有一个局限性 他只适用于块级元素block而我们往往有时候想偏移掉的a上的字体所以问题就来了text-indent:- ...
- 【强烈推荐】如何给TortoiseGit 配置密钥？
TortoiseGit 使用扩展名为ppk的密钥,而不是ssh-keygen生成的rsa密钥.也就是说使用 ssh-keygen -C "username@email.com" - ...
- linux c 笔记-1
指令帮助: man xxx_command man 2 xxx_command man 3 xxx_command eg. 打开文件的函数open, 如果不清楚传参,则 man open man 2 ...
- 基于分类的Vad效果
提取出频谱特征,然后使用gmm.svm.dnn模型进行训练和分类,实时话语检测. 原始文件 VAD处理,剔除静音后的效果:
- 调整 ANTD 组件菜单的字体大小。
调整 ANTD 组件菜单的字体大小:经过多次试验,原有字体太小,只有12px,通过下列CSS 强制加大. 1.分组子菜单(标题) .ant-menu-inline > .ant-menu-sub ...