阻止孩子覆盖父母的轮廓?

2023-12-05

由于某些元素位于幻灯片内,我使用带有负偏移量的轮廓而不是边框​​。

然而,子元素覆盖了轮廓,但我想要它们上面的边框。我用它来构建内容。

http://jsfiddle.net/z22kw2zq/1/

.parent {
 position:relative; outline: green 3px solid;
  outline-offset:0px;
background-color:pink;
pading:5px;
overflow:hidden;
}
.child {position:relative; top:26px; background-color:yellow;
display:inline;
}

你可以使用:after用于轮廓和添加的伪元素position: absolute.

.parent {
  position: relative;
  background-color: pink;
  overflow: hidden;
}
.parent:after {
  width: 100%;
  height: 100%;
  content: '';
  outline: green 3px solid;
  outline-offset: -3px;
  position: absolute;
  top: 0;
  left: 0;
}
.child {
  position: relative;
  top: 23px;
  background-color: yellow;
  display: inline;
}
p {
  margin: 0;
}
<div class="parent">
  <div class="child">lorem ipsum doler sit amet</div>
  <p>text here</p>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

阻止孩子覆盖父母的轮廓? 的相关文章

  • IE8 - 隐藏 div 内的表单,返回键不再起作用

    我有一个登录表单 位于带有 display none 的 div 中 然后我使用 jquery 淡入表单 但 Enter Return 键不再提交表单 如果我将显示更改为阻止 则效果很好 此问题仅存在于 IE 中 有任何想法吗 这是一个不起
  • 如何获取 Google Chrome 中所有加载的 CSS 类的列表?

    有时我需要打印 CSS 类列表才能找到合适的类 最适合我的是 JS 控制台中的函数 当您键入时 JS 类列表会被加载和过滤 例如 如果我需要记住一个图像类 我输入 Img 然后加载图像类列表 ImgFolder ImgPencil var
  • 如何使用CSS缩进多级select optgroup?

    只是试图通过嵌套深度缩进 optgroup 块 我尝试了一般margin left规则 嵌套元素然后尝试应用相同的规则 尝试过padding left 这样的缩进可能吗 看起来很简单 P 在下面的示例中 标记为 client2 a 的 op
  • 重新加载页面时删除哈希值?

    我使用哈希来切换我的图像滑块 当我重新加载页面并且哈希值设置为 e h 3 没有图片 当图库在几秒钟后自动滑动时 它显示下一个 所以几秒钟内什么也没有 有没有办法在加载页面时检查哈希并将其删除 我只想关心那些用散列为页面添加书签的人 问候
  • 如何让 jstree 节点显示长的、可能是多行的内容?

    当使用jsTree插件 http www jstree com 我需要有一个显示其完整内容的节点 目前 每个节点仅显示大约一行文本 如何让 jsTree 中的节点显示节点中的所有文本而不截断节点的内容 下面的 CSS 代码就可以解决这个问题
  • 如何使用CSS缩放图像以填充div并保持纵横比?

    我想用一个 div 填充img 保持纵横比并根据需要拉伸宽度或高度以适应 div style width 80px height 80px img src div 我怎样才能实现它 如果图像不是二次方的 则必须将其 放大 并根据哪一侧较大而
  • 对其中一个具有相同 tabindex 的焦点的所有元素应用相同的效果

    在我的上一篇文章中 我问了如何通过 css 选择器使不可聚焦的元素变得可聚焦 答案是使用tabindex 现在我希望 当具有选择器的元素获得焦点 单击 时 选择器选择的另一个元素也能获得效果 这可能听起来很奇怪 但我很久以前就可以不小心这样
  • Angular SlickGrid 对齐标题文本

    我正在使用角度SlickGrid并希望将列标题中的文本居中或右对齐 并非所有列都以相同的方式 我发现 有一个headerCssClass列定义中的属性 但我一直尝试 这种样式似乎从未被应用 对于列定义 id sourceNumber nam
  • 我应该创建一个块还是一个元素 BEM CSS?

    Bem官网说 创建一个块如果一段代码可以被重用并且它不依赖于正在实现的其他页面组件 创建一个元素如果一段代码在没有父实体 块 的情况下无法单独使用 我有一个 关于部分 块 它的元素依赖于父级并且不能在网站中重复使用 如何根据 bem 这段代
  • 将引导程序弹出框保留在视口内

    我正在尝试使用带有按钮的侧边栏创建一个菜单 每个按钮都有一个指定的包含相关数据的弹出窗口 不幸的是 其中一个弹出窗口可能包含任意数量的行 并且在某些情况下它可能部分位于视口之外 See http jsfiddle net bfd9f 1 h
  • 提升变焦不起作用

    我正在使用带有苹果风格幻灯片画廊的提升缩放功能 一切正常 然而 缩放功能会放大被滑块隐藏的隐藏图像 直到单击缩略图时它们变得可见 启动缩放插件的原始代码是 zoom 01 elevateZoom 我从其他问题中得到了下面的 JavaScri
  • 如何实现弧形顶部指针

    有人可以帮忙解决这个问题吗 如何仅用CSS实现附加按钮 无图像 到目前为止 这是我的代码 triangle up width 0 height 0 border left 25px solid transparent border righ
  • 在 Safari 中提交表单后无法对 DOM 进行样式更改

    在 Safari 中提交表单后 我在对 DOM 进行样式更改时遇到问题 有谁知道它是否可能 这是 Safari 预期的浏览器行为吗 我设置了一个非常简单的示例 以便您可以看到实际问题 http jamesmichaelking com st
  • 如何在同一个

    中设置两种不同的字体大小

    我有一段 HTML 代码 我一直坚持不下去 我怎样才能将这个文本的第一部分的字体大小设置为 20px 以及后面的文本 br 标签字体大小为 15px 或者 如果我做的完全错误 我该如何做而不将它们放在不同的标签中 p Los Santos
  • 使用位置的最大缺点是什么:绝对和顶部/左侧超过浮动和边距+填充,如果网站是固定宽度(970px),居中?

    使用CSS定位最大的缺点是什么 来自 Dreamweaver AP 部门 http livedocs adobe com en US Dreamweaver 9 0 help html content WScbb6b82af55445948
  • 使绝对定位的div扩展父div高度

    正如你在下面的 CSS 中看到的 我想要child2将自己定位在之前child1 这是因为我目前正在开发的网站也应该在移动设备上运行 在移动设备上child2应该位于底部 因为它包含我想要在移动设备上的内容下方的导航 为什么不是 2 个母版
  • 在选择 tr 来覆盖父 div 上的第 n 个子类时,如何使用 jquery addClass ?

    我用它来选择一个 tr 当单击它来更改 tr 的颜色时 tr click function this addClass selected siblings removeClass selected 参见小提琴http jsfiddle ne
  • CSS3动画比例[重复]

    这个问题在这里已经有答案了 我正在尝试对 div 进行动画处理 以便在页面加载时它具有比例 0 0 并动画到比例 1 1 我遇到的问题是 一旦动画生效 div 就会再次缩放到 0 我想要的是 div 动画缩放 1 1 并保持这样 这是我的
  • Flexbox 列的垂直间距相等

    我在CSS中努力让我的Flexbox在垂直等距的列中显示项目 从而使列的每行之间的空间均匀 html body flex container margin 0 height 100 width 100 body font family Dr
  • 从“class”名称中删除/替换不需要的前缀信息

    我正进入 状态style从后端 它带有不需要的前缀 我会替换没有前缀的相同内容 正确的方法是什么 这就是我得到的

随机推荐

  • RISC 架构中小数的直接算术运算

    是否有任何 RISC 架构允许算术运算单独应用于字节 半字和其他数据单元 其大小小于 CPU 通用寄存器的大小 在 Intel x86 IA 32 和 x86 64 称为 EM64T 或 AMD64 处理器中 不仅整个寄存器可用 而且其较小
  • 使用具有单个 DbContext 和实体的多个数据库并在运行时生成连接字符串

    我正在开发一个 MVC 5 应用程序 最初 我使用单一数据库和 EF6 数据库第一种方法 并使用 DbContext 实例来访问包含 102 个表的数据库 我将其实例声明为 私有 MyEntities db new MyEntities 现
  • 使用 Application.WorksheetFunction.Trim 修剪一系列单元格

    我正在尝试使用修剪一系列单元格Application WorksheetFunction Trim 我正在尝试定义我的范围 但出现类型不匹配错误 我创建了 Dim 并设置了范围并为该函数创建了一个变量 Dim rng As Range Di
  • Scalaz 管道运算符与列表方法连接

    我是新手Scala 但我有一些使用经验OCaml 我正在考虑采用中定义的管道运算符Scalaz通过以下方式 import scalaz import Scalaz def test def length2 x String List x l
  • 保存与 Cakephp 3 的关联

    我在使用 CakePHP 3 和通过一项操作保存新实体及其关联时遇到问题 在我看来 我按照文档中的建议进行操作 这是我的控制器 articles TableRegistry get Articles article articles gt
  • AngularJS 中指令隔离范围与 ng-repeat 范围

    我有一个带有隔离范围的指令 以便我可以在其他地方重用该指令 并且当我将此指令与ng repeat 它无法工作 我已阅读有关此主题的所有文档和 Stack Overflow 答案并了解这些问题 我相信我已经避免了所有常见的问题 所以我知道我的
  • jQuery .each 在 Safari 上比 Chrome/Firefox 慢

    我有一个大型 HTML 表格 1 000 1 500 行 40 列宽 我有一些输入和选择框 以便用户可以过滤行 附加的相关 javascript jquery 注意 没有粘贴整个代码库 因为它不是瓶颈 如下所示 function autoR
  • 错误:文档未定义,在构建角度通用应用程序时

    Error factory require jquery document window navigator ReferenceError document is not defined 面对角度通用渲染服务器端的问题 我用谷歌搜索了这个并
  • 如何理解UML中类似自反关联的“自反聚合”关系

    这个类图是什么意思 自反关联的类图使用了实线和箭头 但这里用空心菱形代替 和递归有关系吗 这个类图会生成什么 如果能举个例子就最好了 另外这个递归关系应该是一对多 如果存储数据库怎么建表 这是什么意思 这个类图意味着Unit can与其他几
  • 如何保持Python脚本输出窗口打开?

    我刚刚开始使用Python 当我在 Windows 上执行 python 脚本文件时 输出窗口出现但立即消失 我需要它留在那里 以便我可以分析我的输出 我怎样才能保持它打开 您有几个选择 从已打开的终端运行该程序 打开命令提示符并键入 py
  • Android Studio Arctic Fox (Adb) - 连接的设备在一段时间后断开连接

    我有 7 部不同的 Android 手机 它们都有不同的 Android 操作系统 他们都面临着同样的断线问题 大约一小时后 设备将断开连接 当它断开连接时 Allow USB debugging 出现弹出窗口twice并希望我允许已批准的
  • 将 RIGHT 外连接转换为左外连接 SQLite

    我需要为 Sqlite 设计一个查询 原来的查询是这样的 FROM PhysicianActivity INNER JOIN Activity ON PhysicianActivity ActivityID Activity ID RIGH
  • 在运行时将 byte[] 加载到 System.Windows.Controls.Image 中

    我有一个代表 png 文件的 byte 我正在通过 WebClient 下载此 png 当 WebClient 下载了我通过 URL 引用的 png 时 我得到一个 byte 我的问题是 如何将 byte 加载到 WPF 中的 System
  • 调整大小后 QRubberBand 在 QGraphicsView 上移动

    我在这个主题中遇到了同样的问题 当我调整窗口大小时 QRubberBand 移动 经过几次尝试 我意识到本主题的解决方案不适用于 QGraphics 视图 当我调整窗口大小时 为什么我的选择会围绕 QgraphicsView 移动 impo
  • 如何使用seaborn displot 将直方图条形围绕刻度线居中?堆叠酒吧是必不可少的

    我搜索了许多制作以刻度线为中心的直方图的方法 但无法找到适用于 seaborn displot 的解决方案 函数 displot 允许我根据数据框中的列堆叠直方图 因此更喜欢使用 displot 的解决方案或允许基于数据框中的列进行堆叠的解
  • 遍历整个 PDF 并将蓝色更改为黑色(同时更改下划线的颜色)+ iText

    我正在使用下面的代码从 pdf 文本中删除蓝色 它运行良好 但它不是改变下划线颜色 而是正确改变文本颜色 原始文件部分 被操纵的文件 正如您在上面的操作文件中看到的 下划线颜色没有改变 两周以来我一直在寻找解决这个问题的方法 任何人都可以帮
  • Firebase 中的嵌套列表[重复]

    这个问题在这里已经有答案了 尝试了解如何在 Firebase 中实现嵌套列表 问题可简化为 一个 1 对 N 消息传递系统 其中 对于每条消息 您希望维护已接收并阅读该消息的用户列表 已读过 Firebase 中数组的最佳实践 尝试避免使用
  • 如何更改 pandas groupby.agg 函数的输入参数?

    我在使用 groupby object agg 方法和想要更改输入参数的函数时遇到问题 是否有可用的函数名称资源 agg 接受 以及如何将参数传递给它们 请参阅下面的示例 import pandas as pd import numpy a
  • Jenkins 无法访问已安装的驱动程序

    我的 Jenkins 服务器在 Windows 2008 服务器上的 Tomcat 中运行 我在CentOS上搭建了一个NFS服务器 Win2008服务器可以通过mount命令访问NFS共享文件夹 我在 Windows 上以管理员用户身份运
  • 阻止孩子覆盖父母的轮廓?

    由于某些元素位于幻灯片内 我使用带有负偏移量的轮廓而不是边框 然而 子元素覆盖了轮廓 但我想要它们上面的边框 我用它来构建内容 http jsfiddle net z22kw2zq 1 parent position relative ou