html - 媒体查询的绝对定位

标签 html css

<分区>

我在使用媒体查询设置绝对元素样式时遇到问题。现在我有一个位于屏幕左上角的框。但是,当屏幕尺寸低于 768px 时,我希望此框固定在右上角。这是我的代码:

HTML

<div></div>

CSS

div {
  position: absolute;
  left: 0;
  top: 0;
  height: 200px;
  width: 200px;
  background: red;
}

@media (max-width: 768px) {
  div {
    right: 0;
  }
}

这是我的笔的链接:https://codepen.io/Hudson_Taylor11/pen/ZeNXwz

谢谢!

最佳答案

试试这个:

@media (max-width: 768px) {
  div {
    right: 0;
    left: auto;
  }
}

关于html - 媒体查询的绝对定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43258373/

上一篇:css - 在内容之前不工作手写笔标题循环

下一篇:html - 如何更改 bg 图像的堆叠顺序?

相关文章:

javascript - 禁用 jQuery 窗口大小功能

html - 试图让 3 个 div 彼此相邻,同时保持它们的响应,以便堆叠在彼此下面

javascript - <div> 标签,带有可点击链接,内部有 <a> 标签

javascript - 如果 div 具有特定的 Child,则更改背景颜色

javascript - Ace Editor 在 <head> 标签内生成 CSS 样式

jquery - 获取给定 jQuery <tr> 对象的 <td> 值字符串

css - 使链接填充可点击

html - 使用什么技术来显示这些优雅的可点击选项?

html - 如何在没有特异性的情况下覆盖类?

css - 以不同的方式设计 2 个元素