相关疑难解决方法(0)
'transform3d'不适用于职位:固定子女
我有一种情况,在正常的CSS情况下,固定的div将准确定位在指定的位置(top:0px,left:0px).
如果我有一个具有translate3d变换的父级,这似乎不受尊重.我没有看到什么？我尝试过其他webkit-transform,如样式和变换原点选项,但没有运气.
我已经附加了一个JSFiddle,其中一个示例我希望黄色框位于页面的顶角而不是容器元素的内部.
您可以在下面找到小提琴的简化版本:
#outer {
position:relative;
-webkit-transform:translate3d(0px, 20px , 0px);
height: 300px;
border: 1px solid #5511FF;
padding: 10px;
background: rgba(100,180,250, .8);
width: 80%;
}
#middle{
position:relative;
border: 1px dotted #445511;
height: 300px;
padding: 5px;
background: rgba(250,10,255, .6);
}
#inner {
position: fixed;
top: 0px;
box-shadow: 3px 3px 3px #333;
height: 20px;
left: 0px;
background: rgba(200,180,80, .8);
margin: 5px;
padding: 5px;
}任何使translate3d与固定位置的孩子一起工作的指针将不胜感激.
推荐指数
解决办法
查看次数
使用css反转颜色
HTML
<div>
<p>inverted color</p>
</div>
CSS
div {
background-color: #f00;
}
p {
color: /* how to use inverted color here in relation with div background ? */
}
有没有办法p用css 反转颜色？
color: transparent;为什么color: invert;即使在CSS3中也没有？
推荐指数
解决办法
查看次数
测试是否为CSS动画启用了硬件加速？
我如何判断(出于测试目的)是否已为CSS动画启用硬件加速？
我有以下代码,它基本上放大了一个元素并使其全屏(不使用HTML5全屏API).当使用jQuery动画时,它在大多数手机上像一只口吃的哮喘龟一样运行,所以我使用的是CSS3.
这是jsFiddle示例:
$("#makeFullscreen").on("click", function() {
var map = $("#map"),
mapTop = map.offset().top,
mapLeft = map.offset().left;
$("#map").css({
"position": "fixed",
"top": mapTop,
"left": mapLeft,
"width": map.outerWidth(true),
"height": map.outerHeight(true)
});
setTimeout(function(){map.addClass("fullscreen")},1);
return false;
});.mapContainer {
width: 150px;
height: 200px;
position: relative;
margin: 0 auto;
}
.map {
background: #00f;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
}
.fullscreen {
-webkit-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
-moz-transition: top …推荐指数
解决办法
查看次数
修复了相对父div中定位的div
我目前正在构建一个响应式网站,需要修复一个菜单,因此当网站的其余部分滚动时不会滚动.问题是它是一个流畅的布局,我希望"固定位置"菜单项相对于包含父元素而不是浏览器窗口是固定的.无论如何这可以做到吗？
推荐指数
解决办法
查看次数
当父母旋转或翻译时,"position:fixed"div不固定
阿div与"position: fixed"被嵌入到一个父div.当父母旋转或翻译时,孩子div也会移动.
这是一个错误吗？我希望孩子div能够保持固定.
HTML片段:
<div id="mask">
<div id="page">
</div>
</div>
请访问:http://jsfiddle.net/PseKK/
我知道我可以通过对孩子应用逆向转换来修复它,div但出于性能原因,在我的实际场景中,我正在寻找一种不涉及额外转换的解决方案.
任何想法如何克服？
推荐指数
解决办法
查看次数
IE中固定定位元素闪烁,如何解决？
IE11中的奇怪问题,当使用鼠标滚轮或光标键时,以下项目的固定背景会闪烁.肯定是这是一个错误.
网站:http://gerbrandy.zitemedia.nl:88 /
我使用脚本来调整背景比例,但这不是问题,因为滚动时resize事件不会触发,所以这不是脚本的问题.它与固定定位元素有关.在所有其他浏览器中,此脚本可以使用几年.
我不知道如何解决这个问题.尝试了几件事,但不知道如何禁用javascript例如但不应该是这种情况.我在Windows 8.1上使用IE11.
有人对此有相同的经验,你知道如何解决这个问题吗？
推荐指数
解决办法
查看次数
css3列和溢出隐藏
我正在尝试使用css列来制作pinterest样式布局.它正在工作,但列中的元素在顶角使用了对角线overflow: hidden.这些色带仅显示在第一列的元素上.我希望它们能够出现在每一栏的所有元素中.如果删除了overflow: hidden所有元素上出现的色带.我做了一个jsfiddle来演示:
https://jsfiddle.net/6ooefvq3/5/
这种行为似乎只发生在Mac上的chrome(49.0.2592.0 canary)上,在safari(9.0.2)上看起来没问题.
知道我可能缺少什么,或需要更改,所以这些色带显示在所有列中的所有元素？
编辑
推荐指数
解决办法
查看次数
当父容器发生变换时如何强制固定位置？
我需要将位置固定到应用了转换的父项内的子 div 的视口。不幸的是我无法删除父级的转换。
- 有什么想法如何覆盖这种行为吗？
- 我可以在子元素上使用变换使其看起来类似于固定位置吗？
.rotate {
transform: rotate(30deg);
background: blue;
width: 300px;
height: 300px;
margin: 0 auto;
}
.fixed {
position: fixed;
background: red;
padding: 10px;
color: white;
top: 50px;
} <html>
<body>
<div class="rotate">
<div class="fixed"> I am fixed inside a rotated div.</div>
</div>
<div class="fixed"> I am fixed outside a rotated div.</div>
</body>
</html>推荐指数
解决办法
查看次数
如何使 HTML 工具提示在溢出：隐藏父级中完全可见？
我正在尝试为我的应用程序制作一个工具提示，以便当我将鼠标悬停在某些文字上时，会出现一个弹出窗口。要悬停的文字不完全可见（即，它位于具有溢出：隐藏的表格单元格中，因此文字被截断）。我想将鼠标悬停在工具提示上时显示完整的文字。我希望工具提示完全可见，不受表格单元格的溢出：隐藏的影响。这是我到目前为止所拥有的：
CSS：
.tooltip {
position: relative;
}
.tooltip:hover:after {
background: rgba(0,0,0,.8);
color: #fff;
top: -30px;
left: 10px;
border-radius: 15px;
content: attr(alt);
padding: 5px 15px;
position: absolute;
}
HTML：
<table>
<tr>
<td style="overflow:hidden">
<span alt="reallyLongFullWriting" class="tooltip">partiallyHiddenWriting</span>
</td>
<td></td>
</tr>
</table>
它的工作原理如下，但工具提示在溢出时也会被隐藏。请帮助我弄清楚如何使工具提示完全可见而不是部分隐藏。谢谢。
编辑：这是一张似乎正在发生的事情的照片：
推荐指数
解决办法
查看次数
如何在没有 JavaScript 的情况下使元素相对于窗口具有粘性（如果可能）？
我一直爱着position: sticky。它无需求助于 JavaScript 即可解决大部分（如果不是全部）问题。但是，我已经碰壁了。我需要制作一个嵌套在几个元素内的元素<div>以使其具有粘性。我们知道是和position: sticky的混合，因此它将锚定到它的第一个父级。position: relativeposition: fixed
来自MDN：
元素按照文档的正常流程定位，然后相对于其最近的滚动祖先和包含块（最近的块级祖先）进行偏移
在这种情况下，我想让标题相对于窗口而不是容器具有粘性。HTML 使我很难在嵌套之外重组它<div>
如果没有 JavaScript，这可能吗？
这是代码：
<div class="attendance">
<!-- Here's the header I want to make sticky to the window, and not to div.attendance-->
<header class="text-center sticky">Monday 11/22/2019</header>
<!-- Header above -->
<div class="date-config">
<div class="form-group">
<input type="checkbox" id="workable" /> No Work<br />
</div>
<div class="form-group">
<label for="notes">Notes:</label>
<textarea id="notes" class="form-control"></textarea>
</div>
<label for="markall">Mark all as>
<select id="markall" class="form-control">
<option></option>
<option>Absent</option> …推荐指数
解决办法
查看次数
非画布菜单和固定定位标题
我正在创建一个非常基本的画布菜单,一切都工作出色,但这一件小事我无法解决!
- 访问www.loaistudio.com并将窗口重新调整为1000px以下.
- 向下滚动一下,然后单击标题左上角的"菜单"按钮.
为什么绝望？它实际上并不绝望,但它只是移动到页面的顶部!这是为什么？如何修复它并将其保持在视图区域的顶部...
这是HTML
<div id="page"><!--Main Container-->
<!--Header (small screens only)-->
<div id="secondHeader">
<a class="secondHeader-menuButton" href="#">Menu</a>
<p id="logo-smallScreen">Website Name</p>
</div>
<!--/////////////////////////////////////////////////-->
<div class="wrapper">
<div id="homeSectionA" class="content">
<h1>Header One</h1>
<h2>Header Two</h2>
<h3>Header Three</h3>
<h4>Header Four</h4>
<br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make …推荐指数
解决办法
查看次数