HTML之div分层初探

最新推荐文章于 2024-01-27 21:31:42 发布
最新推荐文章于 2024-01-27 21:31:42 发布
阅读量3.9k 收藏 1
点赞数 1
文章标签： div分层
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SanBaDao/article/details/78437704
版权

一、为什么要分层？

      当做前端时，有时，要把某个div叠加到另一个div的上面，这就用到了分层显示。这就要设计谁在谁的前面显示，经过一下午的研究，就一行代码：

z-index:100;
后面的数值，自己设定，值越大，越在上层。

二、具体说一下分层

2.1 顺序分层


2.2 非顺序分层


有时间了再写。。。。

   

     

编个球编个大气球
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
div嵌套html不用iframe
09-28
在不用iframe的情况下嵌套页面，所以只好在div中嵌套，下面是具体的实现，主要使用到了jquery，大家可以参考下
网页style样式div分层
08-11
网页style样式div分层网页style样式div分层网页style样式div分层
轻松解决java报错：SSLException: Unrecognized SSL message, plaintext connection?
最新发布
qq_63683610的博客
01-27 1514
轻松解决java报错：SSLException: Unrecognized SSL message, plaintext connection?
html中DIV鼠标右击菜单
11-27
html中可对某个区域中鼠标右键实现菜单功能，方便菜单下的操作
div分层
06-30
div分层
html div 透明样式示例代码
09-25
div的透明样式在css中可以通过滤镜来实现，在滤镜中使用alpha来设置透明度，下面有个不错的示例及相关属性的介绍，感兴趣的朋友不要错过
div的分层设计
*静*的专栏
05-08 2043
div的分层设计    在我们制作网页时，都需要将网页上的内容进行模块化，并且当网页内容比较复杂时就需要将模块进行层叠设计，即：div里面嵌套div，嵌套后再嵌套，嵌套后再嵌套......这就是一个比较繁琐的过程了。其实只要掌握了其中的原理，嵌套再多也就是那样了。    接下来，我只针对模块化讲解，里面内容我在前几篇博客中已经告诉大家如何去添加了。大家有兴趣可以去看看，     不平凡
2-8 CSS定位（div分层、position取值、层叠上下文）
前端知识库
04-15 883
一个div的分层 1.布局和定位的区别： 布局是屏幕平面上的 定位是垂直于平面的 2.盒模型 背景颜色范围？ 答：border外边缘围成的区域。（border的宽度颜色会覆盖背景，调成半透明可以进行验证） div分层 内联子元素：文字 块级子元素：正常的元素（没有加float: left） 文字内容不管在哪都是按出现的顺序进行覆盖 position的五个取值 1.static默认值，当前元素待在文档流里，一般不写 2.position: relative 相对定位，升起来但不脱离文档流 使
html div 层级,深入浅出CSS：Div（一）
weixin_33901449的博客
06-10 1858
这个系列是学习笔记，简明记录结论性的知识。新建一个层时，border为零，margin为0，padding为0，如果不指定宽度(width)，则自动100%填充父元素。三、层与父元素的关系1. 举例，直接建立一个新层div1，则它的父元素就是body，当给新层添加内外补白或边框等等时，body的宽度并未发生变化。当层不断的扩张，比如增加margin,padding或border时，它的总长或总宽=...
html设置网页div的显示层次顺序z-index
夜空的流星的专栏
03-09 3万+
z-index定义和用法 z-index 属性的值设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释：元素可拥有负的 z-index 属性值。注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！说明该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近（靠上层），为负数则表示离用
两个div分层，一个在上面一个在下面
banan4805的博客
01-28 9618
<style type="text/css"> .shell{ position:relative; color:#fff; height:150px; width:55px; display:block border:1px solid #aaa; filter:alpha(opacity=50); margin-right:10px;} </style&gt...
html div层次感,使用这些 CSS 属性，布局效率又提高了一个层次！
weixin_42510608的博客
06-11 983
作者：Ahmad shaded译者：前端小智来源：sitepoint点赞再看，养成习惯本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star...
说说标准——CSS核心可视化格式模型(visual formatting model)之十三：分层的显示(Layered presentation)
WebAdvocate的专栏
09-07 3121
<br />前面已经将 CSS 中比较核心的布局基础讲解完毕了。其中说到的主要有 3 种布局方式，一种是常规流中的定位，一种是浮动，最后的是绝对定位。不熟悉的童鞋可以翻看以前关于常规流，浮动，绝对定位的帖子。这 3 种定位方式，可以让你把元素放到任何需要的地方（- -# 当然，不包含浏览器可见窗口之外）。<br /><br /> 为了说明方便，我们把浏览器的可视窗口看 作二维的坐标系，以左上角为原点。假设两个元素分别形成了 100px×100px 的框，我把 A 的左上角放到了坐标为(100,
CSS z-index 属性 控制div上下层次
热门推荐
jackpk的专栏
10-20 6万+
CSS,z-index,div层次
HTML DIV 多层显示测试
yelenn1115的博客
07-03 364
<!doctype html> <html> <head> <title>table contenteditable</title> <style type="text/css"> .bg_img { /*相对位置*/ position: relative; width: 625px; height: 352px; } .ms { /*绝对位置*/ ...
DIV层显示
maypol的专栏
03-11 1049
             测试                                                                 var onecount;         onecount=0;         subcat = new Array();            
html+div居中
11-22
在HTML中，可以使用CSS样式来实现div居中。以下是两种常用的方法： 1.使用绝对定位和负边距实现div居中 ```html <!DOCTYPE html> <html> <head> <title>居中示例</title> <style type="text/css"> #container { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px; width: 200px; height: 100px; background-color: #ccc; } </style> </head> <body> <div id="container"> <p>这是一个居中的div</p> </div> </body> </html> ``` 2.使用margin属性实现div居中 ```html <!DOCTYPE html> <html> <head> <title>居中示例</title> <style type="text/css"> #container { margin: 0 auto; width: 200px; height: 100px; background-color: #ccc; } </style> </head> <body> <div id="container"> <p>这是一个居中的div</p> </div> </body> </html> ``` 以上两种方法都可以实现div居中，具体使用哪种方法取决于具体情况。需要注意的是，使用第一种方法时，需要给div的父元素设置position: relative;属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值