CSS 位置 - 顶部 100% 不等于底部 0

2023-11-30

我在分配时注意到了这一点fixed定位到 css3 动画的元素,即top: 100%没有得到相同的效果bottom: 0;。它定位文档外部的元素,而bottom:0;仍然显示整个元素。

JSFiddle演示

css位置有相反的吗top:0;这会自动产生与以下相同的效果bottom:0;?


那是因为topvalue 以顶边为参考点,需要使用transform: translateY(-100%)使底边成为参考点。

.top {
  position: fixed;
  top: 100%;
}
.bottom {
  position: fixed;
  top: 100%;
  transform: translateY(-100%);
}
<div class="top" style="padding:20px;border:1px solid #000;">TOP: 100%;</div>

<div class="bottom" style="padding:20px;border:1px solid #000;">BOTTOM: 0;</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS 位置 - 顶部 100% 不等于底部 0 的相关文章

  • 获取一行中的最后一个 li jQuery

    我们有一个简单的ul ul li some text li li some some text li li text more li li text here li ul ul text align center width 100px l
  • CSS“内容”不起作用

    我想通过 CSS 添加该段落的文本 而不是在 HTML 中 因为它会随着网站的响应能力而变化 现在我无法让它工作 我想知道CSS是否有问题 另外 这是唯一可以做到的方法 使用纯 HTML 和 CSS 还是有另一种方法来定位文本并根据每个分辨
  • html 可嵌入 flash wav 播放器

    我需要一个可在 IE FF 和 Chrome 中播放 wav 文件的嵌入式音频播放器 目前无法转换为 mp3 或任何其他格式 该播放器应该非常简单 只有一个播放 暂停按钮 也许还有一个时间轴栏 用户可以单击该时间轴栏来转到音频的特定部分 还
  • 具有自定义设计的 ASP.NET 复选框

    有没有办法改变asp net复选框的ui样式 我试过这个 cabeceraCheckBoxNormal background url ig res Default images ig checkbox off gif no repeat c
  • 如何将我的 html 表单发布到 django 模型并保存?

    我有 html 表单 我想发送并保存到 django 模型 当我尝试发送消息时出现错误 ValueError at account userinfo akylson
  • 数据库中的 HTML 标签是不好的做法还是好的做法?

    有时我需要格式化来自数据库的特定数据或部分数据 例如 如果我有这样的 desc 存储在数据库中 HTML 4 经过调整 延伸和增强 超出了其最初的范围 为网站带来了高水平的交互性和多媒体 Flash Silverlight 和 Java 等
  • Selenium driver.page_source() 仅提取部分 HTML DOM

    我有一个网页 当我右键单击它然后查看页面源时 我得到 SECTION A 但是当我点击它然后检查时 我得到了更长的输出 我尝试使用 JS 获取页面源 但同样的问题 我得到了输出SECTION A 我怎样才能解决这个问题 注意 我正在寻找通用
  • CSS:应用于类组合的样式?

    我不确定这是否可行 但是当您想根据应用于元素的类的组合来设置元素的样式时 是否可以在 CSS 中使用语法 我知道我可以使用 jQuery 或其他东西检查元素并根据它所具有的类更改它的样式 但是有没有一种纯 CSS 方法可以做到这一点 例如
  • 用于自由形式绘图的 javascript 库

    是否有一个 JavaScript 库可以让我在网页上绘图 然后保存该绘图的状态 我想使用鼠标绘制 2D 图像 然后如何存储和加载该绘图 使用 HTML5 画布 绘制图像的简单示例如下 http jsfiddle net ghostoy wT
  • 将整个网页设计为 SVG 文件

    免责声明 我意识到鉴于标题的荒谬 这听起来像一个巨魔 然而 这是一个真正的问题 我的背景涉及OpenGL x86 汇编 我最近开始学习网络编程 我真的很喜欢 SVG CSS 并且想知道 为什么人们不使用 SVG 设计整个网页 Context
  • 如何从矩形点计算旋转角度?

    我有4分1 2 3 4闭合一个矩形 这些点按以下方式排列在数组中 x1 y1 x2 y2 x3 y3 x4 y4 我遇到的问题是矩形可以旋转一定角度 如何计算原始点 灰色轮廓 和角度 我试图在 javascript css3 transfo
  • 在 IE 中使用
    标签时,填充不起作用

    我在我的应用程序中使用 HTML5 标签 标签的填充在 chrome ff 和 safari 中工作正常 但在 IE 中不起作用 我尝试添加显示 块 与部分样式 但它没有用 有什么解决办法吗 许多旧浏览器不理解 HTML5 标签 例如sec
  • 在文档片段中查找注释或文本节点

    我必须清理 Nokogiri HTML DocumentFragment 文档 删除仅包含空格的注释节点和文本节点 这是一个例子 html p paragraph p p paragraph p p paragraph p doc Noko
  • 将 DIV 堆叠在一起?

    是否可以堆叠多个 DIV 例如 div div div div div div div div div div 那么所有这些内部 DIV 都具有相同的 X 和 Y 位置吗 默认情况下 它们都在彼此下方 将 Y 位置增加了上一个 DIV 的高
  • 如何在 html 画布上使文本适合精确的宽度?

    如何在 html5 画布上将单行文本字符串调整为精确的宽度 到目前为止我尝试过的是以初始字体大小编写文本 测量文本的宽度measureText my text width 然后根据我想要的文本宽度和实际文本宽度之间的比例计算新的字体大小 它
  • charset-utf8 和字符实体

    我建议将我的 windows 1252 XHTML 网页转换为 UTF 8 我的编码中有以下字符实体 39 撇号 9658 右指针 9668 左指针 如果我使用编辑器更改字符集并将页面保存为 UTF 8 撇号保留为字符实体 指针被转换为代码
  • 如何在没有查询参数的情况下重新加载页面?

    假设我想重新加载www domain com abc num 4 但我想重新加载www domain com abcONLY 问号后没有所有内容 window location window location href split 0
  • data:image/png;base64 是什么意思?

    我从一个在线网站上举了一个例子 CSS 包含一个指向 png 的 URL 和一些随机字母 在这两种情况下 任何人都可以告诉我如何制作这样的代码 或者更确切地说 这些代码是关于什么的 这是html
  • 使 html svg 对象也成为可点击的链接(在 iPhone 上)

    这个问题与使 html svg 对象也成为可点击的链接 https stackoverflow com q 11374059 4825796 但给出的答案似乎不适用于 iPhone ios 9 3 safari 和 chrome 浏览器 我
  • 滚动视图上的固定按钮

    我目前正在尝试在屏幕右下角的滚动视图上显示一个按钮 但它不起作用 当我滚动视图时按钮会移动 我尝试先插入按钮 但滚动视图位于其上方 class HomePage extends Component loadUserItems this pr

随机推荐

  • 通过 Mongoose 更新多个子文档?

    举例来说 我们使用以下模式来定义评论树 id ObjectId id here parentComment This is my opinion isHidden false comments comment I disagree with
  • 解析 Json 数组导致 This is not a JSON Array 异常

    我正在尝试解析一个 Json 数组 如下所示 FoodItemData country GB id 100 name Steak and Kidney Pie description Tender cubes of steak with t
  • 在 Python GUI (PyQt) 中运行外部 exe

    我想在 python gui python 2 7 Windows PyQt 中运行 exe 例如 calc exe 或 cmd exe 有人知道我该怎么做吗 类似这样的事情 https www youtube com watch v N6
  • 我可以在回调中动态创建测试规范吗?

    我想检索页面上的元素列表 并为每个元素创建一个测试规范 我的 伪 代码是 fetchElements then element list foreach element it should have some property functi
  • 如何使用 Google Guice 绑定不同的接口?

    我是否需要创建一个新模块 并将接口绑定到不同的实现 Chef newChef Guice createInjector Stage DEVELOPMENT new Module Override public void configure
  • Python - 请求/RoboBrowser - ASPX POST JavaScript

    我正在移植一个 bash 脚本 该脚本使用curl 并将代码中的有效负载 POST 到 URL 并且可以正常工作 基本问题是 使用 robobrowser 我在使用页面表单发布时遇到了麻烦 逐步浏览该网站 登录 SubLogin aspx
  • 在opencv中求熵

    我需要一个像这样的函数entropyfilt 在matlab中 opencv中不存在 在Matlab中 J entropyfilt I 返回数组 J 其中每个输出像素包含输入图像 I 中相应像素周围 9 9 邻域的熵值 我写了一个函数在 C
  • 给类点击事件C#

    嗨 我只是想知道是否有一种方法可以为班级提供自己的点击事件 例如 我有一个卡片类 有没有办法知道用户何时单击该类中的矩形 显示卡片的图片 或者更好的是 我如何知道何时单击卡片矩形 要从 Windows 获取 鼠标已单击此处 消息 您需要有一
  • JTextArea 不动态更新

    我在一个类中有一个 JTextArea 我想动态更新它 目前它只显示我在所有处理完成后附加到它的文本 我尝试执行以下操作来修复它 public NewConsole initComponents public void write fina
  • 如何使用videoview流畅地播放url中的视频?

    我有一项活动VideoView 它正在播放来自 url 的视频 我所做的就是为了玩得顺利 我已经放了一个ProgressDialog在活动开始时 并在里面驳回它onPreparedListener这样才能玩得又好又流畅 但仍然没有帮助 视频
  • android - 如何使按钮闪烁?

    有没有什么方法 在代码中 使按钮持续闪烁 然后在按下时停止闪烁 有几种 具体取决于您所指的闪烁类型 例如 您可以使用 alpha 动画并在按钮第一次出现时启动它 当用户单击按钮时 在您的OnClickListener做就是了clearAni
  • 将围绕 sockaddr_storage 和 sockaddr_in 进行转换,打破严格的别名

    继我之前的question 我真的很好奇这段代码 case AF INET struct sockaddr in tmp reinterpret cast
  • 将原始 HTTP 请求转换为 HTTPWebRequest 对象

    在 NET 中 是否可以将原始 HTTP 请求转换为 HTTPWebRequest 对象 我确信 NET 内部正在这样做 知道 NET 的哪一部分实际上在处理这个问题吗 我可以调用它吗 或者是否有任何允许原始 HTTP 连接的外部库 我不相
  • dart 中的转义“正则表达式”

    我正在尝试捕获 dart 正则表达式中的符号 我的正则表达式如下所示 RegExp containsSymbolRegExp RegExp r lt gt 但是 我还需要让它捕获符号 但我不能把 放在那里 因为它会弄乱字符串 有什么想法如何
  • 如何比较数组中的日期以找到最早的日期?

    我有一个名为 dateArray 的变量 其中包含日期 例如 09 09 2009 16 07 2010 29 01 2001 我想用 for 循环找到最早的一个 所以结果是 29 01 2001 or dateArray 2 语言是jav
  • 选择窗口无法选择子窗口

    在我的 Java 代码中 单击 编辑描述 链接后 将打开一个窗口 即 Java 脚本窗口 此处的图像第一个给出带有属性的锚标记 第二个打开窗口 Image 1 Image 2 Window image Along with Page Sou
  • 在Python中将字符串二维列表转换回二维列表[重复]

    这个问题在这里已经有答案了 我刚刚开始玩Python 我知道我们可以使用 str 将任何列表转换为字符串 喜欢 gt gt gt l 1 1 2 2 3 3 gt gt gt l 1 1 2 2 3 3 gt gt gt type l
  • 太多的回溯:为什么这里有“重做”?

    我正在 Prolog 中做一个非常简单的练习 但跟踪中有些东西我不明白 该程序是一个 大于 gt 对表示为后继的整数 greater than succ 0 greater than succ A succ B greater than A
  • 如何清除p:dataTable中的所有输入字段?

    我将 JSF 2 0 与 PrimeFaces 一起使用 我有一个
  • CSS 位置 - 顶部 100% 不等于底部 0

    我在分配时注意到了这一点fixed定位到 css3 动画的元素 即top 100 没有得到相同的效果bottom 0 它定位文档外部的元素 而bottom 0 仍然显示整个元素 JSFiddle演示 css位置有相反的吗top 0 这会自动