百分比定位加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的父元素来进 ...
随机推荐
- pixel art之 hqx 算法
在去年的时候,偶然看到hqx算法. 一个高质量的插值放大算法. 与双线性插值等插值算法相比,这个算法放大后对人眼保护相对比较好. 没有双线性插值看起来模糊,固然,也抽空把算法简单优化了一下. 官网及代 ...
- HDU 3600 Simple Puzzle 归并排序 N*N数码问题
先介绍八数码问题: 我们首先从经典的八数码问题入手,即对于八数码问题的任意一个排列是否有解?有解的条件是什么? 我在网上搜了半天,找到一个十分简洁的结论.八数码问题原始状态如下: 1 2 3 4 5 ...
- 第13章 Windows内存体系结构
13.1 Windows的虚拟地址空间安排 13.1.1虚拟地址空间的分区(即虚拟地址空间布局) 进程的地址空间划分 分区 x86 32位 Windows 3GB用户模式下的x86 32位Window ...
- IL查看委托
查看委托的IL 通过IL来查看委托的原理, 委托示例代码 写一个委托的类如下 using System; namespace MyCollection { //定义一个类,该类包含两个静态方法 c ...
- [本人开发的游戏] Discuz网页动物园插件1.0Beta发布！让积分流动起来！
插件发布 插件名称: DZ网页动物园插件 插件来源: 原创插件 适用版本: Discuz! X3 语言编码: GBK简体 UTF8简体 BIG5繁体 UTF8繁体 最后更新时间: 2014- ...
- 狮子和计算Java题
package cn.bdqn.com; import java.util.Scanner; public class Jisaunqi { int num1; int num2; int jiegu ...
- Python进阶-面向对象
类的成员 类的成员可以分为三类:字段.方法.属性 一:字段: 普通字段和静态字段,他们在定义和使用中有所区别,而最本质的区别是内存中保存的位置不同 普通字段属于对象 静态字段属于类 字段的定义和使用 ...
- 会报编译器警告的Xcode 6.3新特性：Nullability Annotations
最近在用Xcode 6.3写代码,一些涉及到对象的代码会报如下编译器警告: 1 Pointer is missing a nullability type specifier (__nonnull o ...
- Java中的Random（）函数
今天在做Java练习的时候注意到了Java里面的一个随机函数——Random,刚开始只是知道这个函数具有随机取值的作用,于是上网搜索了资料一番,做了一下一些关于Random函数的总结: Java中 ...
- sed 4个功能
[root@lanny test]# cat test.txt test liyao lanny 经典博文: http://oldboy.blog.51cto.com/2561410/949365 h ...