小DIV嵌套在大DIV上 大的设置 position:relative;

最新推荐文章于 2023-11-03 20:38:10 发布
最新推荐文章于 2023-11-03 20:38:10 发布
阅读量1.5k 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/a1057962851/article/details/84262769
本文介绍了一种使用CSS的层叠布局技巧，通过设置大div为relative定位，小div为absolute定位，并利用z-index属性调整层级，实现精确的页面元素堆叠效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

大DIV设置

position:relative;

 

小DIV设置

postion:absolute;

z-index:1

 

第二个设置 

z-index:2

GeekBoyCode
关注
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例
waterlin2011的博客
06-10 1283
通过合理运用 position 属性及其值，你可以构建出既美观又实用的页面布局。关键是理解每种定位方式的特性，并根据实际需求灵活组合使用。
html怎么设置在一个div的右侧,关于html：如何将另一个div中的2个div对齐到底部和左侧/右侧...
weixin_35618539的博客
05-30 2192
我有这个代码HTMLCSS.head {height:110px;position:relative;}.menu {float:left;position:absolute;bottom:0px;}.search {float:right;position:absolute;bottom:0px;}我想做的是将div"menu"放在div"head"的左下方，将div"search"放在div"...
Div中嵌套一个div，怎么是里面的div居中？
12-15 359
　　盒子居中是在写样式中经常遇到的问题，在这里说个我经常使用的方法~ 　　利用绝对定位； 转载于:https://www.cnblogs.com/Mrs-pao/p/8043266.html...
大div中嵌套小div，点击大div时隐藏，点击小div不隐藏
weixin_30894389的博客
07-26 346
给小div添加一个click事件 <div onClick="event.cancelBubble = true"> //小div 转载于:https://www.cnblogs.com/gqx-html/p/7241402.html
html中多个div嵌套时div在上一级中的相对位置的设置
热门推荐
annuoa的专栏
11-20 1万+
在利用div+css进行布局时，常常被div的位置弄的焦头烂额，其实只要了解了div的position属性就可以了 position的四种取值的四种取值的四种取值的四种取值  static:static定位就是不定位，出现在哪里就显示在哪里，这是默认取值，只有在你想覆盖以前的定义时才需要显示指定  relative:relative 就是相对元素static定位时的位置进行偏移，如果指定st
同一级HTML,html中多个div嵌套时div在上一级中的相对位置的设置
weixin_39630735的博客
06-04 796
在利用div+css进行布局时，常常被div的位置弄的焦头烂额，其实只要了解了div的position属性就可以了position的四种取值的四种取值的四种取值的四种取值static:static定位就是不定位，出现在哪里就显示在哪里，这是默认取值，只有在你想覆盖以前的定义时才需要显示指定relative:relative 就是相对元素static定位时的位置进行偏移，如果指定static时top...
一个大div里面包裹一个小div,里面的小div的点击事件不触发外面的这个大div的点击事件
setsunadoudou的博客
10-08 4269
一开始上html代码 <div id="div1" style="background: blue;width: 100px; height: 100px;"> <div id="di...
CSS 嵌套DIV布局(position属性)
01-21
嵌套DIV布局，会牵扯到CSS的position属性 如果内层DIV将position属性设置为absolute，并设置left，和top等属性，还需要考虑外层DIV的position属性设置。 absolute:absolute绝对定位，直接指定top、left、right、...
position:relative/absolute无法冲破的等级
10-31
1. **增加嵌套层次**：将`<span>`包裹在一个额外的`<div>`容器内，并对该容器设置`position:relative`，对`<span>`保持`position:absolute`不变。 ```html <div> 第二块 </div> ``` ```css li div { ...
div嵌套布局
Clarence_Pang的博客
11-20 3962
div 横向布局 display:inline
让一个div盒子里面的两个div盒子垂直居中
最新发布
qq_50952645的博客
11-03 1320
【代码】让一个div盒子里面的两个div盒子垂直居中。
div的嵌套
wangzhewln的博客
06-27 807
如需将此代码嵌入到 JSP 页面中，只需将 HTML 部分的代码复制到 JSP 页面的对应位置即可。<input type="submit" value="提交">中添加了一个表单元素，包括用户名和密码输入框以及一个提交按钮。的 JavaScript 函数，并将其绑定到内部。元素通过修改 CSS 样式的方式设置为不可见。-- 其他 HTML 代码 -->这个示例中，我们先创建了一个外部的。-- 表单代码 -->元素，以及一个嵌套在内部的。为了实现点击事件隐藏内部的。函数会被调用，将内部的。
DIV嵌套相关实例
不抛弃、不放弃：Aaron莫言
09-10 1940
相关代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> .div-body{ overflow:auto; height:...
移动端常用技巧(ios兼容)
skybel的博客
09-21 642
主要是跟一个东西有关，DPR(devicePixelRatio) 设备像素比，它是默认缩放为 100%的情况下，设备像素和 CSS 像素的比值。软键盘唤起后，页面的 fixed 元素将失效，变成了 absolute，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。这个不是bug，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。在高清屏下，移动端的 1px 会很粗。
DIV的Position属性和嵌套显示
iteye_21324的博客
08-18 443
1.前言 我们在利用div+css进行布局时，常常被div的位置弄的焦头烂额，很多人甚至放弃了div而直接用table。这里一如既往的推荐使用div布局，其实我们只要掌握了div的position属性和div的float属性，布局是非常灵活的，这里详细说一下div的position，没想象中那么简单，也没想象中那么复杂。 2.position的四种取值 static:static定位就是不定位，出...
divcss布局模板代码_CSS3布局（前端所必须要掌握）
weixin_39715834的博客
11-23 2301
CSS布局传统方案是基于盒装模型，依赖display属性+position属性+float属性，但对于一些特殊布局（eg:垂直居中）就不容易实现。补充：块元素：出现在另一个元素下面的元素；内联元素：出现在另一个元素旁边的元素，就像段落中的单个单词一样；dispaly属性一些默认的display的值，段落之间样式默认值为：display:block；<a>元素默认为display:inl...
<div>标签嵌套多层如何找准位置
小狼驿站
01-07 1614
当<div>嵌套多层后，有时候找到一个准确的位置有点难，用margin属性，会改变其他<div>的布局，这时候可以用这个方法：div{ left:30%; top:30%; position:absolute; }这样可以解决个别<div>的显示问题。
CSS+DIV布局中absolute和relative的区别
weixin_30362801的博客
06-24 1423
来源 ：http://developer.51cto.com/art/201009/225201_1.htm 解释的很好。摘下来后面自己能看看。 区别：定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在，而定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不在存在。 position各个属性值的定义： 1、static：默认...
position:relative 详解
湛庐无方
03-04 6307
position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位. relative和absolute的另外一个很重要的区别就是当被定义成absolute的对象被移出了，那么他原来的位置也就不存在了， 如果被定义成rela
精通WEB开发：DIV在页面布局中的应用技巧
4. DIV的定位与浮动：CSS中的position属性可用于控制DIV元素的位置，如static（默认）、relative、absolute、fixed等。浮动布局通过float属性实现元素的左浮动或右浮动，可以使多个DIV元素按照水平方向排列。 5. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值