百分比定位加position定位的常用布局
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
*{
margin:0;
padding:0;
}
html,body,#wrap{
width:100%;
height:100%;
}
#wrap{
background:#09F;
position:relative;
}
#wrap .overflow{
position:absolute;
left:50px;
top:50px;
right:50px;
bottom:50px;
background:#999;
}
</style>
<body>
<div id="wrap">
<div class="overflow">
//有时候你要让某个元素宽或者高100%的时候,里面的元素你完全可以使用定位[left,right,top,bottom],定到某个位置,而不是使用window.onreize;
</div>
</div>
</body>
</html>
百分比定位加position定位的常用布局的更多相关文章
- CSS position 属性_css中常用position定位属性介绍
css可以通过为元素设置一个position属性值,从而达到将不同的元素显示在不同的位置, position定位是指定位置的定位,以下为常用的几种: 1.static(静态定位): 这个是元素的默认定 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- CSS Position 定位属性
本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...
- position 定位
position属性是指本体相对于上级的定位,position又分绝对定位和相对定位.他的默认值是static,意味着元素没有被定位,出现在文档流中应该出现的位置.如果用position来布局页面,父 ...
- 浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- 元素重叠及position定位的z-index顺序
元素位置重叠的背景常识 (x)html文档中的元素默认处于普通流(normal flow)中,也就是说其顺序由元素在文档中的先后位置决定,此时一般不会产生重叠(但指定负边距可能产生重叠).当我们用cs ...
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
- 盒子模型&position定位
有时候深深的感觉语文这门课程其实很有用, 至少以前学的时候没有感觉到 直到现在阅读大量的别人的资料文章的时候或者是看一些题目....... 总之:认真阅读小心品味 当然,前面的孤言自语和本文无关,只是 ...
- 归纳篇(一)CSS的position定位和float浮动
近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...
随机推荐
- 推荐——Monkey《大话 app 测试——Android、iOS 应用测试指南》
<大话移动——Android与iOS应用测试指南> 京东可以预购啦!http://item.jd.com/11495028.html 当当网:http://product.dangdang ...
- SPOJ QTREE Query on a tree --树链剖分
题意:给一棵树,每次更新某条边或者查询u->v路径上的边权最大值. 解法:做过上一题,这题就没太大问题了,以终点的标号作为边的标号,因为dfs只能给点分配位置,而一棵树每条树边的终点只有一个. ...
- MySQL数据库学习笔记(九)----JDBC的ResultSet接口(查询操作)、PreparedStatement接口重构增删改查(含SQL注入的解释)
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...
- Linux+Mono+Asp.net入门:05CentOs安装Mono(上)
http://www.cnblogs.com/jameszou/archive/2013/05/18/3085754.html 准备工作 常见问题 a. Xshell显示中文乱码问题 [文件]–> ...
- tomcat配置jenkins遇到的问题
在执行jenkinks时,遇到以下错误: 原因:未在tomcat/conf中的tomcat-users.xml中配置用户 解决方法:在tomcat/conf/tomcat-users.xml中添加以下 ...
- java 20 - 7 字节输入流的操作
字节输入流操作步骤: A:创建字节输入流对象 B:调用read()方法读取数据,并把数据显示在控制台 C:释放资源 步骤A.C 略过,说步骤B 读取数据的方式: A:int read():一次读取 ...
- android strings.xml 报 is not translated in af,
57 down vote In your ADT go to window->Preferences->Android->Lint Error Checking Find there ...
- Git 详解
1. Git 1.1. Git是何方神圣? Git是用C语言开发的分布版本控制系统.版本控制系统可以保留一个文件集合的历史记录,并能回滚文件集合到另一个状态(历史记录状态).另一个状 态可以是不同的文 ...
- 注解与反射 ---Spring与Mybatis等框架的实现原理
Java中各大框架,无论是AOP 还是 IoC 其基本实现思路都是源自Java 运行时支撑的反射功能, 而反射最基本的一点就是 任何一个类 其在JVM环境中,都有一个对象的Class对象,这个对象提供 ...
- 关闭linux centos各种声音
shell报警 #vi /etc/inputrc ================================ set bell-style none 或 echo "set bell- ...