绝对位置,但相对于父位置
本文翻译自:Position absolute but relative to parent
I have two divs inside another div, and I want to position one child div to the top right of the parent div, and the other child div to the bottom of the parent div using css. 我在另一个div内有两个div,我想使用css将一个子div定位到父div的右上角,另一个子div定位到父div的底下。 Ie, I want to use absolute positioning with the two child divs, but position them relative to the parent div rather than the page. 即,我想对两个子div使用绝对定位,但是相对于父div而不是页面定位它们。 How can I do this? 我怎样才能做到这一点?
Sample html: 范例html:
<div id="father"><div id="son1"></div><div id="son2"></div>
</div>
#1楼
参考:https://stackoom.com/question/i0Ds/绝对位置-但相对于父位置
#2楼
div#father {position: relative;
}
div#son1 {position: absolute;/* put your coords here */
}
div#son2 {position: absolute;/* put your coords here */
}
#3楼
#father {position: relative;
}#son1 {position: absolute;top: 0;
}#son2 {position: absolute;bottom: 0;
}
This works because position: absolute
means something like "use top
, right
, bottom
, left
to position yourself in relation to the nearest ancestor who has position: absolute
or position: relative
." 之所以如此,是因为position: absolute
是指“使用top
, right
, bottom
, left
相对于最近的具有position: absolute
或position: relative
祖先进行定位的东西。
So we make #father
have position: relative
, and the children have position: absolute
, then use top
and bottom
to position the children. 因此,我们使#father
具有position: relative
,而子代具有position: absolute
,然后使用top
和bottom
定位子代。
#4楼
If you don't give any position to parent then by default it takes static
. 如果您不给父母任何职位,那么默认情况下它将采用static
。 If you want to understand that difference refer to this example 如果您想了解这种差异,请参考此示例
Example 1:: 示例1:
http://jsfiddle.net/Cr9KB/1/ http://jsfiddle.net/Cr9KB/1/
#mainall
{background-color:red;height:150px;overflow:scroll
}
Here parent class has no position so element is placed according to body. 在此,父类没有位置,因此根据正文放置元素。
Example 2:: 示例2:
http://jsfiddle.net/Cr9KB/2/ http://jsfiddle.net/Cr9KB/2/
#mainall
{position:relative;background-color:red;height:150px;overflow:scroll
}
In this example parent has relative position hence element are positioned absolute inside relative parent. 在此示例中,父级具有相对位置,因此元素绝对位于相对父级内部。
#5楼
Incase someone wants to postion a child div directly under a parent 如果有人想将孩子div直接放在父母的下面
#father {position: relative;
}#son1 {position: absolute;top: 100%;
}
Working demo Codepen 工作演示Codepen
绝对位置,但相对于父位置相关推荐
- css图片位置改变过度效果_CSS位置:绝对的,过度使用的
css图片位置改变过度效果 Developers who know just enough CSS to get them into trouble, along with obsessive, pi ...
- 周期同步位置模式(CSP),轮廓位置模式(PPM),位置模式(PM)
什么是运动控制? 运动控制就是通过机械传动装置对运动部件的位置.速度进行实时的控制管理,使运动部件按照预期的轨迹和规定的运动参数(如速度.加速度参数等)完成相应的动作. 运动控制系统的典型构成 1. ...
- 逆天通用水印支持Winform,WPF,Web,WP,Win10。支持位置选择(9个位置 ==》[X])...
常用技能:http://www.cnblogs.com/dunitian/p/4822808.html#skill 逆天博客:http://dnt.dkil.net 逆天通用水印扩展篇~新增剪贴板系列 ...
- 唱歌如何保持高位置_如何理解歌唱发声的高位置?如何保持高位置歌唱状态?【男高音】...
一.何谓声音的高位置? 高位置是指嗓音的位置和焦点"安放"的一种潜意识形态.对于男高音的歌唱,必须训练歌者在高位置上发声的习惯,熟练运用鼻咽腔和额窦腔的共鸣作用,让歌声进入面罩.获 ...
- mysql查找字符串最后位置_mysql查找字符串出现位置
标签: MySQL中的LOCATE和POSITION函数使用方法 FIND_IN_SET(str,strlist) 假如字符串str 在由N 子链组成的字符串列表strlist 中,则返回值的范围在 ...
- 打开程序时固定位置_FANUC机器人:参考位置功能介绍与设定方法
机器人参考位置概述 机器人参考位置是在运行程序中或手动运行过程中频繁使用的固定位置(预先设定的位置).参考位置通常是离开工装夹具等外围设备的可动区域范围内的安全位置. 机器人位于参考位置时,会立即输出 ...
- C和指针之结构体大小和成员变量位置距离结构开始存储的位置偏移字节
1.问题 1).结构体大小 结构体成员的内存分配满足下面三个条件 2 结构体第一个成员的地址和结构体的首地址相同 3 结构体每个成员地址相对于结构体首地址的偏移量是该成员大小的整数倍,如果不是 ...
- 桔子浏览器电脑版收藏夹位置在哪里 收藏夹位置路径
桔子浏览器电脑版收藏夹位置在哪里?有很多用户将之前浏览的网页保存到了收藏夹里,不知道在哪里可以找到,下面通过这篇文章给大家讲解一下. 桔子浏览器电脑版收藏夹位置在哪里 收藏夹位置路径 桔子浏览器PC版 ...
- 6个座位办公室最佳位置_办公室座位最佳位置(讲解)
在办公室选择办公位置也很重要,办公位置的好坏也会直接影响工作效率和进度,从而影响到个人健康以及公司的财运等问题. 所以办公室座位不得不重视,下面大师为大家讲解关于办公室位置最佳位置. 办公室座位最佳位 ...
最新文章
- swift (Singleton)模式
- sql server密码过期,通过SSMS修改策略报错
- 建造者模式(Builder Pattern)简单随笔
- docker 打包部署 python项目_Docker如何部署Python项目的实现详解
- mysql 深入视图和索引
- SSLOJ 1335.蛋糕切割
- Ubuntu16.04几分钟自动断网问题
- python爬取qq好友网络状态_Python爬虫实战----爬取QQ空间好友说说并生成词云(超详细)...
- 安卓打开本应用的应用信息界面的代码
- 计算机基础教程有access2010,Access2010数据库案例教程
- Qt制作音乐播放器按钮
- HERO引擎传奇遇到的问题以及解决办法
- VS2019 EF6连接Mysql闪退以及实体框架版本问题
- 康宁发布第五代大猩猩玻璃 坚韧度更强更耐摔
- 同步电路与跨时钟域电路设计2——多bit信号的跨时钟域传输(FIFO)
- Vue 获取当前日期
- 仓鼠找sugar II
- 计算机里没有四款小游戏,电脑里一些隐藏在程序里有趣的小游戏
- win11账户锁定了怎么解除?
- 如何准备将您的 Mac 升级到 macOS Monterey?