0

0

CSS让DIV重叠实例总结

零下一度

零下一度

发布时间:2017-06-07 11:00:55

|

3908人浏览过

|

来源于php中文网

原创

css层叠性是指css样式在针对同一元素配置同一属性时,依据层叠规则(权重)来处理冲突,选择应用权重高的css选择器所指定的属性,一般也被描述为权重高的覆盖权重低的,因此也称作层叠。

1. 解析CSS样式继承和层叠

基本选择器

标签选择:根据页面当中标签名字进行选择,直接把样式应用到指定的标签上。

特点:

立即学习前端免费学习笔记(深入)”;

1.标签选择器会对当年页面当中所有的指定标签进行选择;

2.标签选择器对代码的当前标签层次结构没有任何关联,只要是在当前页面上,都能被选中。

id选择:需要先指定一个标签设置id值(id值不能重复是整个页面中唯一的)。

class选择:通过给标签取类名,通过类选择器选择指定标签。

2. CSS外边距(margin)重叠及防止方法

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果没有正边界,则从零中减去绝对值最大的负边界。注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成。

e43a750fbb169b2e7d3ec4798133c28c-0.gif

3. 解析CSS 中元素的叠放顺序

当不包含z-index属性和position属性时,所有元素的叠放顺序与其所在HTML文档中出现的先后顺序一致。(使用负margin来重叠内联元素的特例除外。)

当元素浮动float时,浮动块元素被放置于非定位块元素与定位块元素之间,换句话讲,浮动元素显示在普通流中的后代块元素之上,常规流中的后代行内元素之下。

元素加入position位置属性时,所有具有position属性的元素及其子元素会显示在其他不具有position属性的元素上面。

ecshop仿万表网商城整站
ecshop仿万表网商城整站

该软件是以ecshop作为核心的仿制万表网的商场网站源码。万表网模板 2015最新版整体简洁大气,功能实用,是一款时尚典雅的综合类模板!样式精美的商品分类树,层次分明,分类结构一目了然。首页轮播主广告分别对应切换小广告,商品宣传更到位。独家特色增加顶级频道页面、品牌页面,以及仿京东对比功能,提升网站档次,让您的网站更加高端大气!并且全站采用div+css布局,兼容性良好,更注重页面细节,增加多种j

下载

4. CSS实现p的随意重叠方法介绍

f9820e1d0ae09e7c02ec2ab099cd2ef9-0.gif

这篇文章主要为大家介绍了让p重叠并按想要顺序重叠需要CSS来实现,即CSS绝对定位进行实现,需要的朋友可以参考下 让p重叠并按想要顺序重叠需要CSS来实现,即CSS绝对定位进行实现。 
重叠样式需要主要CSS样式解释 

5. css 让两个div重叠

做网页的时候在p里放了一个别的网页的天气插件,但是点击了会跳到广告页面的,想去网上找个禁止p点击的方法,可是发现没有,用了js的方法好像也没有成功,后来觉得还是用两个层重叠的方法来阻止点击,虽然定位是有点麻烦

6. div重叠问题

我在html定义了两个p 但是显示出来的结果却是两个p部分重合了 原先是不重合的 不知道我碰了哪个键 在运行时 图层就发生了重合 我把那两个p单独拎出来 显示正常 我就想问问出现这种状况的原因是什么呀? 

相关问答:

1. javascript - 在相对定位中使用top等属性,为什么会出现div重叠的情况?

2. javascript - 两个div重叠以后,在页面重新生成一个div,只生成一个,这个效果怎么写?

【相关推荐】

浅谈css中margin的重叠

canvas动态小球重叠效果

为什么浮动能实现文字环绕图片而不会重叠

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Python 序列化
Python 序列化

本专题整合了python序列化、反序列化相关内容,阅读专题下面的文章了解更多详细内容。

0

2026.02.02

AO3官网入口与中文阅读设置 AO3网页版使用与访问
AO3官网入口与中文阅读设置 AO3网页版使用与访问

本专题围绕 Archive of Our Own(AO3)官网入口展开,系统整理 AO3 最新可用官网地址、网页版访问方式、正确打开链接的方法,并详细讲解 AO3 中文界面设置、阅读语言切换及基础使用流程,帮助用户稳定访问 AO3 官网,高效完成中文阅读与作品浏览。

91

2026.02.02

主流快递单号查询入口 实时物流进度一站式追踪专题
主流快递单号查询入口 实时物流进度一站式追踪专题

本专题聚合极兔快递、京东快递、中通快递、圆通快递、韵达快递等主流物流平台的单号查询与运单追踪内容,重点解决单号查询、手机号查物流、官网入口直达、包裹进度实时追踪等高频问题,帮助用户快速获取最新物流状态,提升查件效率与使用体验。

27

2026.02.02

Golang WebAssembly(WASM)开发入门
Golang WebAssembly(WASM)开发入门

本专题系统讲解 Golang 在 WebAssembly(WASM)开发中的实践方法,涵盖 WASM 基础原理、Go 编译到 WASM 的流程、与 JavaScript 的交互方式、性能与体积优化,以及典型应用场景(如前端计算、跨平台模块)。帮助开发者掌握 Go 在新一代 Web 技术栈中的应用能力。

11

2026.02.02

PHP Swoole 高性能服务开发
PHP Swoole 高性能服务开发

本专题聚焦 PHP Swoole 扩展在高性能服务端开发中的应用,系统讲解协程模型、异步IO、TCP/HTTP/WebSocket服务器、进程与任务管理、常驻内存架构设计。通过实战案例,帮助开发者掌握 使用 PHP 构建高并发、低延迟服务端应用的工程化能力。

5

2026.02.02

Java JNI 与本地代码交互实战
Java JNI 与本地代码交互实战

本专题系统讲解 Java 通过 JNI 调用 C/C++ 本地代码的核心机制,涵盖 JNI 基本原理、数据类型映射、内存管理、异常处理、性能优化策略以及典型应用场景(如高性能计算、底层库封装)。通过实战示例,帮助开发者掌握 Java 与本地代码混合开发的完整流程。

5

2026.02.02

go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

62

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

55

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

27

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
JS轻松实现打地鼠游戏
JS轻松实现打地鼠游戏

共6课时 | 0.7万人学习

前端工程师必备技能—PS切图
前端工程师必备技能—PS切图

共11课时 | 1.9万人学习

JS开发验证表单教程
JS开发验证表单教程

共9课时 | 2.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号