css position absolute相对于父元素的设置方式
手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元
大家知道css的position absolute默认是根据document来设置的，比如position:absolute后设置left:0;top:0这时候元素会显示到页面的左上角。
有时候我们需要在父元素的容器内设置相对的绝对位置
要做到这一点需要把父元素的position属性设置为relative，设置为relative之后不设置left和top属性，这时候父元素虽然是relative的，但是还是在原来位置。 然后把子元素的位置position设置为absolute的，并设置其left，top，right，bottom属性，这样就是相对于父元素的绝对位置了。
如下html示例代码：
<!doctype html>
<html>
<style type="text/css">
#father {
position: relative;
width:600px;
margin:auto;
height:400px;
border:1px solid red;
} #son1 {
position: absolute;
top: 0;
background:#f0f0f0;
} #son2 {
position: absolute;
bottom: 0;
background:blue;
}
</style>
<body>
<div id="father">
<div id="son1">I am son1</div>
<div id="son2">I am son2</div>
</div>
</body>
</html>
css position absolute相对于父元素的设置方式的更多相关文章
- 父元素没有设置定位 position absolute 解析
1.示例代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UT ...
- 父元素高度设置为min-height，子元素高度设置为100%，但实际上子元素高度你知道是多少吗？
前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...
- css position: absolute、relative详解
CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置 ...
- css position, display, float 内联元素、块级元素
position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的 ...
- CSS position: absolute、relative定位问题详解
CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的 ...
- css position absolute 浮动特性
absolute的元素不会占据未浮动的元素的空间<html> <head> <style type="text/css"> .flipbox{ ...
- position应用之相对父元素的定位
分别添加以下style即可: 父元素position:relative; 子元素position:absolute; right:0px; bottom:0px;
- CSS position:absolute浅析
一.绝对定位的特征 绝对定位有着与浮动一样的特性,即包裹性和破坏性. 就破坏性而言,浮动仅仅破坏了元素的高度,保留了元素的宽度:而绝对定位的元素高度和宽度都没有了. 请看下面代码: <!DOCT ...
- 【随笔】关于绝对定位absolute相对于父元素定位的问题
绝对定位absolute的官方定义: 设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块.元素原先在正常文档流中所占的空间会关闭,就好像该元素 ...
随机推荐
- Window初始化Git环境
安装Git 去到官网下载地址,找到自己电脑的对应版本,下载安装就好啦,这里就不一一说明了 https://git-scm.com/download/win 初始化Git环境 第一步:打开git-bas ...
- LeetCode10 Hard，带你实现字符串的正则匹配
本文始发于个人公众号:TechFlow 这是LeetCode的第10题,题目关于字符串的正则匹配,我们先来看题目相关信息: Link Regular Expression Matching Diffi ...
- python文件与输入输出
注:本文档是学习<Python核心编程(第二版)>时的整理. 1.文件对象 文件对象不仅可以用来访问普通的磁盘文件,也可以访问任何其他类型抽象层面上的"文件".一旦设置 ...
- Java解析XML文件的方式
在项目里,我们往往会把一些配置信息放到xml文件里,或者各部门间会通过xml文件来交换业务数据,所以有时候我们会遇到“解析xml文件”的需求.一般来讲,有基于DOM树和SAX的两种解析xml文件的方式 ...
- Shell常用命令之yum
介绍 yum命令是在Fedora和RedHat以及SUSE中基于rpm的软件包管理器,它可以使系统管理人员交互和自动化地更细与管理RPM软件包,能够从指定的服务器自动下载RPM包并且安装,可以自动处理 ...
- Nginx进阶
常见的web架构 LAMP - Linux +Apache +MySQL + PHP LNMP - Linux +Nginx + Mysql + PHP RHEL开源 Linux系统 RHEL C ...
- ListFragment 使用ListView and 自定义Adapter
在开发过程中经常使用Tabs + ListFragment 作为表现形式. ListFragment 中加入ListView显示方式很容易. [java] view plaincopy package ...
- selenium 环境配置
一.确认系统中已安装python版本,如果没有,请参考[这里] 二.打开系统命令页面 [window + R].输入cmd回车 三.cmd环境下,用[pip install selenium ]命令安 ...
- MainActivity中R为红色
除了在gradle.properties中加入东西外还可能原因是在activity_main.xml 组件的设置有错误
- num04---模板方法模式
最近看书又遇到模板方法模式,具体是在同步器(AQS)的内容上.就顺便再来回顾下. 同步器AbstractQueuedSynchronizer(AQS)是一个抽象类.其中定义了 基本 ...