将图像放置在右上角 - CSS

2024-01-30

我需要在 div 的右上角显示图像(该图像是“对角线”功能区),但将当前文本保留在内部 div 中,就像粘在其顶部一样。

我尝试了不同的方法,例如将图像包含在另一个 div 中或定义其类,例如:

.ribbon {
   position: relative;
   top: -16px;
   right: -706px;
}

<div id="content">
   <img src="images/ribbon.png" class="ribbon"/>
   <div>some text...</div>
</div>

但没有任何运气。我得到的最好结果是所有文本都向下滚动以达到与图像相同的高度尺寸。

任何想法?


你可以这样做:

<style>
    #content {
        position: relative;
    }
    #content img {
        position: absolute;
        top: 0px;
        right: 0px;
    }
</style>

<div id="content">
    <img src="images/ribbon.png" class="ribbon" alt="" />
    <div>some text...</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将图像放置在右上角 - CSS 的相关文章

  • 更改javascript nodejs中所有页面的href url

    我已经实现了具有多种语言下拉菜单的引导导航栏 当我选择语言时 它将翻译页面 如何更改其他页面的 url 和按钮文本 当我选择french 将所有网址更改为 fr about and fr contact 如何使用 JavaScript 进行
  • 如何保留用户的输入打印?

    我正在尝试添加用户的评论 所以我只是尝试读取输入并将其发送以进行打印 但问题是 一旦我刷新页面或输入另一个输入 打印的输入就会消失 因此 即使刷新页面或重新输入新评论 我也希望始终保持所有用户的显示 代码 div div
  • 可以将position:absolute元素设为粘性吗?

    In CSS position sticky使元素能够显示position static行为 即 它采用文档流中的默认位置 直到到达某个滚动位置 然后采用position fixed行为 那么 这是否意味着我们不能使用position st
  • 无法正确显示行

    我应该在这个问题的开头说我完全没有 html css javascript 背景 所以请对我宽容点 如果我使用了错误的术语或者问了一个愚蠢的问题 没有提供足够的信息 请抱歉 我正在尝试让一个可扩展的表工作 通过阅读论坛线程 教程 将 nex
  • 如何将 HTML 转换为 Markdown?

    我有一个类似 stackoverflow 的网站 有一个文本区域 人们可以在其中写答案 我用这个 PHP 库 http parsedown org 转换降价 我的意思是我使用该函数来转换 italic to i italic i inclu
  • 如何使自定义 Web 组件可聚焦?

    我正在写一个自定义网络组件 https github com denilsonsa html5 knob这意味着是互动的 我如何告诉浏览器这个自定义组件应该获得焦点 我希望我的自定义元素 可以聚焦 通过选项卡导航 集中注意力时可以接收按键信
  • createHTMLNotification() 替换

    我创建了一个 Chrome 扩展程序 其中使用createHTMLNotification 在所有内容之上显示一个窗口 然而 从 Chrome 28 开始 谷歌决定放弃createHTMLNotification 完全 为什么 谷歌 为什么
  • 在 HTML5 Javascript 中将 BlobBuilder 转换为字符串

    function blobToString blob var reader new FileReader var d reader onloadend function d callback reader result console lo
  • 在 Angular html 模板中访问常量枚举

    假设我有一个常量枚举 export const enum MyConstEnum Value1 Value1 Value2 Value2 Value3 Value3 现在我想在我的 Angular 模板中使用它 span This has
  • VBA 完成 Internet 表单

    我正在寻找将 Excel 中的值放入网页的代码 Sub FillInternetForm Dim IE As Object Set IE CreateObject InternetExplorer Application IE naviga
  • div 中的中心文本?

    我有一个div 30px高和500px宽的 这div可以包含两行文本 一行在一行 并相应地设置样式 填充 但有时它只包含一行 我希望它居中 这可能吗 要水平居中 请使用text align center 要垂直居中 只能使用vertical
  • Sass:@use 出错,未定义变量

    我正在使用 Sass 并且想要使用 use关键字而不是 import 因为 import有很多问题 另外只有dart sass支持这个功能 我将node sass改为dart sass 然而 问题出现了 我原来的代码 import carb
  • 浮动图像周围具有最小列宽的流动文本

    我想要一种方法来防止流动文本列变得太窄 例如 在一列 HTML 文本中 有一个图像浮动到左侧 正如预期的那样 文本沿着图像周围的列的右侧向下流动 但是 如果图像几乎与列一样宽 则文本最终会非常窄 在这种情况下 我希望文本简单地not流过图像
  • Bootstrap:如何将按钮组对齐在中心(垂直)

    在下面的代码中
  • CSS 继承、别名和其他很酷的东西

    有一天 我随机浏览网页 发现了一些程序 可以让你编写 CSS 别名和其他很酷的东西 我现在不记得了 举个例子 我记得你可以这样做 myclass background color red greenfont 其中 greenfont 在其他
  • 如何使用javascript确保元素仅在圆上朝一个方向移动?

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394
  • 转义 h 轮廓

    因此 我一直在尝试找出在被较低级别的标题吸引后添加内容的最佳方法是什么 section h1 Title of Section h1 h2 Related 1 h2 h2 Related 2 h2 p I NEED THIS TO BE P
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style
  • Webpack 4:如何使用 LESS 获取 CSS 源映射?

    多年来我一直在尝试让 CSS 源映射在 webpack 中工作 但没有成功 我不确定链条中哪里出了问题 我希望有人能指出我正确的方向 这是发生的事情 行号是错误的 实际上文件名也是错误的 main less只是包含一堆 import也就是说

随机推荐

  • 在 Python 2.7 中包装大列表以使其不可变

    如果我有一个很大的list gt 100k 元素 可以通过函数调用从某个对象中检索 是否有一种方法可以包装该列表以使其对调用者不可变 而无需将其复制到tuple 在下面的例子中我只有一个list领域 但解决方案应该适用于任意数量list f
  • 将 iPhone 应用程序安装到 iPhone

    我按照该网站的教程进行操作 http theappleblog com 2008 08 04 tutorial build a simple rss reader for iphone http theappleblog com 2008
  • jquery - 使用 .done()、.then() 和 .when() 按给定顺序发出 ajax 请求

    我一直在阅读有关 jquery 中 Promise 的大量内容 并在发出多个 ajax 请求时避免 回调地狱 我觉得即使读完所有这些 对于使用什么也没有给出简单的答案 就 done then and when 在链接请求方面 我试图构建最基
  • 使用 pandas 绘制箱线图

    尝试为 pandas 数据框绘制箱线图 但 x 轴列名称似乎不明确 import matplotlib pyplot as plt pd set option display mpl style default fig ax1 plt su
  • Python:如何将进程轮询和非阻塞 WebSocket 服务器结合起来?

    我有个主意 编写一个基于 WebSocket 的 RPC 该 RPC 将根据以下场景处理消息 客户端连接到 WS Web 套接字 服务器 客户端向WS服务器发送消息 WS服务器将消息放入传入队列 可以是multiprocessing Que
  • 按 RDD 值从 Cassandra 表中过滤

    我想根据 RDD 中的值从 Cassandra 查询一些数据 我的方法如下 val userIds sc textFile tmp user ids keyBy e gt e val t sc cassandraTable keyspace
  • 如何在 npm 包中捆绑依赖项?

    我有一个 npm 包 它引用了其他本地包 它有这样的结构 deploy typescriptapp tgz references mydependency 包 json app js app css typescriptapp 包 json
  • 中间人:从 Markdown 引用存储在数据文件中的 URL

    For my 中间人构建的网站我已将所有页面的链接和其他信息存储在数据文件中 https middlemanapp com advanced data files data pages yaml pageA link some long u
  • 关于 Nix 包管理的 Nix 表达式是什么?

    即使在阅读了 Nix 手册之后 仍然对 Nix 表达式的真正含义感到困惑 有时它们被称为派生 但存储派生也有其他含义 在尼克斯 一个尼克斯表达只是您可以用 Nix 语言编写的任何类型值的通用术语 Nix 表达式可以是集合 列表 数字 字符串
  • 如何将 Google Plus 与 iPhone sdk 集成?

    我想将 google plus 集成到我的应用程序中 但我不知道从哪里开始 所以如果有人对此有任何想法 请回复我 以此为基础 gt https developers google com api https developers googl
  • 如何从 ORMLite 的 sqlite 数据库生成 java 类代码

    给定一个 sqlite 数据库作为输入 我想知道如何生成一个ORMLite http ormlite com 与关联数据库映射的java类 非常感谢 你可以尝试Telosys 工具 一个用于代码生成的 Eclipse 插件从现有数据库工作具
  • 文件上传大文件 PHP/AJAX [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • Github API - 检索用户提交?

    我正在尝试构建一种方法 在该方法中我可以访问 Github 用户名 并发布该用户的所有提交或至少一些提交 是否有调用 GET user repo commit 关联或直接用户 提交 现在 我认为需要采取以下措施 获取与特定名称关联的存储库
  • Option 类型的类型转换

    我是 Python 的 Rust 新手 我相信这是一个基本问题 但我太新了 无法通过诸如类型转换选项 在Python中 让类型检查器知道返回类型不是Optional int int 我们可以解决assert强制类型检查器知道的逻辑x永远不会
  • 在python中分配列表中的每个第N个元素

    我想将列表中的每个第 N 个元素设置为其他值 Like 这个问题 https stackoverflow com questions 14994140 how do you make every other integer in an ar
  • C语言中指针可以指向自身内存地址吗?

    在下面的代码中 一个指针指向它自己的内存地址 include
  • Hibernate:多对多连接表的标准?

    考虑以下两个关系 Entity class Foo Id id ManyToMany JoinTable name ATag joinColumns JoinColumn name foo id inverseJoinColumns Joi
  • Python 中 import 和 __import__ 的区别

    我正在查看项目的一些提交 我在文件中看到以下更改 import dataFile dataFile import dataFile 编码器被替换import dataFile by dataFile import dataFile 它们之间
  • 谷歌云存储坏了? [关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 今天我不断得到 The request s content type is not accepted on this URL 对于
  • 将图像放置在右上角 - CSS

    我需要在 div 的右上角显示图像 该图像是 对角线 功能区 但将当前文本保留在内部 div 中 就像粘在其顶部一样 我尝试了不同的方法 例如将图像包含在另一个 div 中或定义其类 例如 ribbon position relative