CSS 子级元素固定在父级元素底部

你的名字 2024-04-17 23:07 84阅读 0赞

前端开发中学会让子级固定在父级元素的底部的技巧很有用哦。

实现效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70][]

案例源码

<!doctype html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>子级元素固定在父级元素底部</title>
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<style>
    			.box1 {
    				height: 200px;
    				background: #999999;
    				/* 相对定位 */
    				position: relative
    			}
    
    			.box2 {
    				width: 100%;
    				height: 40px;
    				background: #AAAAAA;
    				/* 绝对定位 */
    				position: absolute;
    				bottom: 0
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="box1">
    			父级元素
    			<div class="box2">
    				子级元素
    			</div>
    		</div>
    	</body>
    </html>

要点分析

其一：父级元素用相对定位

![20190902180918297.png][]

其二：子级元素用绝对定位

![20190902181014494.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/d97b168793e44f56892120e7e9b6d199.png
[20190902180918297.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/dd69ea5834ff4c169f6f41592865de57.png
[20190902181014494.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/5e34e35e7662435daa00b185016ca583.png

发表评论取消回复

表情：

评论列表（有 0 条评论，84人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS 子级元素固定在父级元素底部

端开发中学会让子级固定在父级元素的底部的技巧很有用哦。实现效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_te...

你的名字/ 2024年04月17日 23:07/ 0 赞/ 85 阅读

相关 js和jquery获取父级元素、子级元素、兄弟元素的方法

原生的JS获取ID为test的元素下的子元素。可以用：比如： <div id="dom"> <div></div> <div></div>

冷不防/ 2022年08月10日 08:51/ 0 赞/ 315 阅读

相关 jquery选择器之获取父级元素、同级元素、子元素

\---------------------转自http://blog.csdn.net/tolcf/article/details/39289471 一、获取父级元素 1

客官°小女子只卖身不卖艺/ 2022年07月26日 00:22/ 0 赞/ 339 阅读

相关 JS获取节点的兄弟，父级，子级元素

先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比。 JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行

秒速五厘米/ 2022年07月14日 09:55/ 0 赞/ 351 阅读

相关 CSS块级元素和行级元素

1. 根据规定，每个网页元素都会存在display属性，其中像div,存在的默认值为”block”属性的即为块级元素 ; 而”span”元素的默认值为”inline”，称

╰半夏微凉°/ 2022年06月17日 02:44/ 0 赞/ 229 阅读

相关 jquery选择器获取父级元素、同级元素、子元素

一、获取父级元素 1、 parent(\[expr\]): 获取指定元素的所有父级元素 <div id="par_div"><a i

缺乏、安全感/ 2022年06月16日 14:46/ 1 赞/ 494 阅读

相关块级子元素在父元素中实现水平垂直居中

源代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8">

深藏阁楼爱情的钟/ 2022年06月05日 22:26/ 0 赞/ 246 阅读

相关 html css样式子元素相对父级元素定位

废话不多说。父级元素样式设置： position:relative; 子元素样式： position: absolute; 这样就可以达到子

系统管理员/ 2022年05月23日 09:30/ 0 赞/ 320 阅读

相关 PHP递归找父级元素和子级元素

/ 寻找所有父级元素 @param $id @param $ancestor @return array /

迈不过友情╰/ 2022年04月24日 02:18/ 0 赞/ 553 阅读

相关 JQ iframe 子元素找父级的元素

$('.content-top-shrink').click(function(){ // 注意要在服务器端运行在本地直接运行

Dear 丶/ 2021年11月05日 08:46/ 0 赞/ 398 阅读