<!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定位的常用布局的更多相关文章

  1. CSS position 属性_css中常用position定位属性介绍

    css可以通过为元素设置一个position属性值,从而达到将不同的元素显示在不同的位置, position定位是指定位置的定位,以下为常用的几种: 1.static(静态定位): 这个是元素的默认定 ...

  2. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  3. CSS Position 定位属性

    本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...

  4. position 定位

    position属性是指本体相对于上级的定位,position又分绝对定位和相对定位.他的默认值是static,意味着元素没有被定位,出现在文档流中应该出现的位置.如果用position来布局页面,父 ...

  5. 浅析CSS——元素重叠及position定位的z-index顺序

    多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...

  6. 元素重叠及position定位的z-index顺序

    元素位置重叠的背景常识 (x)html文档中的元素默认处于普通流(normal flow)中,也就是说其顺序由元素在文档中的先后位置决定,此时一般不会产生重叠(但指定负边距可能产生重叠).当我们用cs ...

  7. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  8. 盒子模型&position定位

    有时候深深的感觉语文这门课程其实很有用, 至少以前学的时候没有感觉到 直到现在阅读大量的别人的资料文章的时候或者是看一些题目....... 总之:认真阅读小心品味 当然,前面的孤言自语和本文无关,只是 ...

  9. 归纳篇（一）CSS的position定位和float浮动

    近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...

随机推荐

  1. 【转】dsadd user批量创建AD用户命令详解

    常见的批量创建用户的方法有四种: 一. 帐户模板的方式 二. CSVDE和LDIFDE 三. 脚本的方式 四. DSADD 但是很少有详细的资料使用DSADD的方式来批量创建帐户,那么我就把我近期使用 ...

  2. UVALive 6269 Digital Clock --枚举，模拟

    题意:说不清楚,自己看吧,太恶心. 这题真是SB了,当时看了一下以为乱搞就好了,于是开始动手拍,结果拍了好几个小时都没拍出来,而且越想越想不通,直接把自己绕进去了,结果gg了. 总结:甭管什么题,想清 ...

  3. URAL 1416 Confidential --最小生成树与次小生成树

    题意:求一幅无向图的最小生成树与最小生成树,不存在输出-1 解法:用Kruskal求最小生成树,标记用过的边.求次小生成树时,依次枚举用过的边,将其去除后再求最小生成树,得出所有情况下的最小的生成树就 ...

  4. POJ 2001 Shortest Prefix

    字典树基本题. 代码: #include <iostream> #include <cstdio> #include <cstring> #include < ...

  5. Unity摄像机的正交视图与透视图

    Unity Camera的两种模式 Projection:投射,投影 Unity的MainCamera的Projection可选择Perspective[透视],Orthographic[正交],是指 ...

  6. 给vs2010安装上cocos2d-x的模版

    开发环境:OS(WINDOWS 8.1 X64 企业版) cocos2d-x 2.2.1  vs2010 想给vs安装上cocos的模版,执行InstallWizardForVS2010.js,老是提 ...

  7. java 14-3 正则表达式的分割

    分割功能 String类的public String[] split(String regex) 根据给定正则表达式的匹配拆分此字符串. 例子: 可以用来做年龄段的筛选,比如说,我要筛选18-26之间 ...

  8. Android事件分发机制完全解析，带你从源码的角度彻底理解

    Android事件构成 在Android中,事件主要包括点按.长按.拖拽.滑动等,点按又包括单击和双击,另外还包括单指操作和多指操作.所有这些都构成了Android中的事件响应.总的来说,所有的事件都 ...

  9. 一个简单的python爬虫，以豆瓣妹子“http://www.dbmeizi.com/category/2?p= ”为例

    本想抓取网易摄影上的图,但发现查看html源代码时找不到图片的url,但firebug却能定位得到.(不知道为什么???) 目标是抓取前50页的爆乳图,代码如下: import urllib2,url ...

  10. S2--《深入.NET平台和C#编程》

    第一章    深入.NET框架 1.1  Microsoft  .NET框架概述 .NET框架的优势 * 提供了一个面向对象的编程环境,完全支持面向对象编程,.NET 框架提高了软件的可复用性,可扩展 ...