<!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. ZBrush中必须记住的常用快捷键

    ZBrush是一款数字雕刻和绘画软件,它以强大的功能和直观的工作流程彻底改变了整个三维雕刻行业.强大的功能离不开便捷的操作,为此ZBrush提供了一系列常用操作快捷键,熟练掌握这些快捷键,可帮助您节省 ...

  2. 渐进记号 Asymptotic Notations-------geeksforgeeks 翻译

    我们已经简单的讨论了下渐进分析以及最坏,平均和最佳情况的分析.渐进分析的主要思想是分析算法的效率,不用依靠计算机的具体快慢,不需要实现这个算法,也不需要真正去计算时间.渐进记号是一种数学的工具来表示渐 ...

  3. jquery和css自定义video播放控件

    下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...

  4. UESTC 901 方老师抢银行 --Tarjan求强连通分量

    思路:如果出现了一个强连通分量,那么走到这个点时一定会在强连通分量里的点全部走一遍,这样才能更大.所以我们首先用Tarjan跑一遍求出所有强连通分量,然后将强连通分量缩成点(用到栈)然后就变成了一个D ...

  5. Spring 一二事（1）

    简单介绍一下spring,一方面带新手入入门,一方面自己也重温一下第一个小工厂先暂时不用maven,下一个会用maven来来配置 jar包只需要一个,spring版本为2.5(暂时为2.5,后续更新, ...

  6. java11-1 最常见的类 String类

    字符串:就是由多个字符组成的一串数据.也可以看成是一个字符数组. 通过查看API,可以知道 A:字符串字面值"abc"也可以看成是一个字符串对象. B:字符串是常量,一旦被赋值,就 ...

  7. php遇上iis之上传突破

    环境: php+window+iis 局限: 文件上传黑名单机制,略显鸡肋 <?php //U-Mail demo ... if(isset($_POST['submit'])){ $filen ...

  8. fanghuangscannerV3 字典生成器

    #-*-coding=GB2312-*- import random import sys def makedict(name): f1 =open(name+'_user.txt','r') f2 ...

  9. C#把某个数组的一部分复制到另一个数组中的两种方法：Buffer.BlockCopy和Array.Copy

    static void Main(string[] args) { , , , , , }; ;//目标数组大小 int int_size = sizeof(int);//用于获取值类型的字节大小. ...

  10. php基础06：运算符

    <?php //1.PHP 字符串运算符: 串接 $str1 = "gao"; $str1 = $str1."xiong"; echo $str1; ec ...