包含css转换边框，除了固定div [英] css transition border is contained except for fixed div

问题描述

出于学习目的，我一直在玩不同的css过渡效果。然而，我不能指出这一点。

一个简单的设置：带有切换图标的顶部导航栏，用于显示侧边栏<一旁> 。边栏项目包装在< div id ='swap'> 中。其中一个侧边栏项目需要位于底部，我已将其位置固定。这里是jquery：

 （function（）{
 $（。toggle-wrap）。on click，function（）{
 $（i）。toggleClass（fa-bars fa-times）; 
 $（main）。toggleClass（main push）; 
 $（aside）。animate（{width：toggle}，200）; 
 $（＃swap）。toggleClass（hidden shown）; 
}） ; 
}）（）; 
  

点击迅速将主要内容移动到右侧并使< （< / code>本身可见 和 ），然后通过转换（ cubic-bezier（0.32,1.25， 0.375，1.15））

麻烦：立方贝塞尔使得一个俏皮入口，但它溢出只对底部的固定项目和溢出：hidden 似乎没有任何作用。过渡之后，它完全就位。以下是截图：

我的问题：如何包含边界/防止这种溢出与固定位置？

b

我已经制作了一个codepen以提供完整的代码。 使用 position：fixed 时，元素将相对于这个视口和它的父容器的溢出将不起作用。

为了解决这个问题，只需切换到 position：absolute ，你的元素将相对于定位到最近的定位祖先，在你的情况下它是抛开元素和这个元素的overflow：hidden 会隐藏你的溢出边框。

---

为什么两个头寸的价值都是相同的？

仅仅因为在你的情况下，你只应用了 bottom：0 并且因为你的不在正在获取屏幕的全部高度， bottom：0 将指向屏幕底部的相同位置。除了之外，您可以略微调整的高度，您会注意到固定和绝对之间的差异在这种情况下。

For learning purposes, I have been playing with different css transition effects. I cannot, however, figure this bit out.

A simple setup: top nav with a toggle icon to display a sidebar <aside>. Sidebar items are wrapped in a <div id='swap'>. One of the sidebar items needs to be at the bottom and I have set its position to fixed. Here is the jquery:

(function() {
  $(".toggle-wrap").on("click", function() {
    $("i").toggleClass("fa-bars fa-times");
    $("main").toggleClass("main push");
    $("aside").animate({ width: "toggle" }, 200);
    $("#swap").toggleClass("hidden shown");
  });
})();

The click swiftly moves the main content to the right and makes the <aside> itself visible and then makes the sidebar items visible via a transition (cubic-bezier(0.32, 1.25, 0.375, 1.15))

The trouble: the cubic-bezier makes a "playful" entrance but it overflows only for the fixed item at the bottom and the overflow:hidden does not seem to have any effect. After the transition, it is perfectly in place. Here is a screenshot:

My question: How can I contain the border/prevent this overflow with the fixed position?

I have made a codepen to have the entire code available.

解决方案

When using position:fixed the element will be positioned relative to the viewport and thus the overflow of its parent container won't work.

To fix this simply switch to position:absolute and your element will be positioned relative to the nearest positioned ancestor and in your case it's the aside element and the overflow:hidden of this element will hide your overflowing border.

---

And why both values of position give the same result?

Simply because in your case, you applied only bottom:0 and since your aside is taking full height of the screen, bottom:0 will refer to same position which is the bottom of the screen. You may adjust slightly the height of aside and you will notice the difference between fixed and absolute in this case.

这篇关于包含css转换边框，除了固定div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！