在具有浮动元素和绝对定位元素的元素上使用jQuery fadeOut函数时的奇怪行为
在使用jQuery的fadeOut函数时，如果元素具有浮动或绝对定位，可能会出现一些奇怪的行为。这是因为在执行fadeOut函数时，元素的浮动或绝对定位属性可能会影响元素的隐藏过程。为了解决这个问题，可以在执行fadeOut函数之前，先将元素的浮动或绝对定位属性移除，然后在执行fadeOut函数之后，再将元素的浮动或绝对定位属性重新添加回去。
以下是一个示例代码：
$("#element").css({"float": "none", "position": "static"});
$("#element").fadeOut(function() {
$(this).css({"float": "left", "position": "absolute"});
});在这个示例代码中，我们首先将元素的浮动属性设置为none，将其定位属性设置为static。然后执行fadeOut函数，在fadeOut函数的回调函数中，将元素的浮动属性设置为left，将其定位属性设置为absolute。这样就可以避免在使用fadeOut函数时出现的奇怪行为。
需要注意的是，在使用这种方法时，需要确保元素的父元素或其他相邻元素不会受到元素的变化而影响布局。如果需要更好地控制元素的隐藏和显示效果，可以考虑使用其他方法，例如使用CSS的transition属性或使用jQuery的animate函数。
相关·内容
3回答
jQuery fadeOut函数在具有浮动元素和绝对位置元素上的奇怪行为
jquery、jquery-1.3
我试图使用jQuery来淡出一个div，使用fadeOut函数。在大多数情况下，它似乎运作良好，但在某些情况下，并不是所有的内容都消失了。如果我在div中有一个绝对定位的元素和一个浮动元素，那么fadeOut函数就不能工作。如果我只有一个绝对定位的元素，它就不能工作。但是如果我有一个绝对定位的元素和一个没有样式的元素，它可以工作。这听起来可能很难解释，但您可以自己使用以下测试代码进行尝试：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR
浏览 1提问于2009-04-09得票数 4
回答已采纳
2回答
在图像鼠标悬停时显示段落
jquery、hover、onmouseover
我在div中有图像，我希望使用jQuery在鼠标悬停时将段落显示在它们的顶部。段落最初是隐藏的。
我尝试了以下方法，但无法使段落仅当我将鼠标放在一个图像上时才显示，仅在该图像的顶部。
HTML：
<div id="photos">
<div class="test">
<img src="http://www.blset.com/img/300x200/biostat300200.jpg" />
<p class="desc">Test 1&
浏览 0提问于2012-04-07得票数 0
回答已采纳
3回答
CSS:浮动:左和浮动:右
html、css、css-float
float:left和float:right在具有position:relative的父级中有什么区别？在我的测试中，这两种方法都会导致一个div浮动在它的父级的左上角，覆盖图像(除非我使用right: 0px手动定位div )。
我可以看到position:absolute的不同之处。float:left需要它来覆盖图像上的div，使用float:right，我可以省略它，仍然可以得到覆盖效果。
有人能告诉我这里发生了什么吗？
我的问题在这个中得到了说明。
HTML：
<div class="parent">
<div class="tag&
浏览 0提问于2014-02-09得票数 2
回答已采纳
2回答
当使用“位置:绝对”和“浮动:左”时，预期的行为是什么？
html、css、layout、css-float、css-position
同时使用position: absolute和float:left看起来有点混乱甚至荒谬，因为position: absolute不会影响同级元素的位置，而float:left会影响同级浮点元素的位置。
但是，在CSS中允许在一起使用它们，那么预期的行为是什么？由于MDN文档()中没有描述，所以我不太确定使用这两种方法时会发生什么。
有人对此有什么想法吗？谢谢!
浏览 2提问于2016-03-05得票数 2
回答已采纳
2回答
绝对位置和浮动
css
您是否知道，如何在不指定“元素1”的精确高度的情况下对此布局进行样式设计？
码
Element1
{
positon: relative;
width: 100%;
height: auto; /* I don't want to specify exact height */
}
Inner1
{
position: absolute;
top: xyz px;
left: xyz px;
}
Inner2
{
position: absolute;
top: xyz px;
left: xyz px;
}
Element2
{
float: left;
width: 100%
浏览 1提问于2010-05-08得票数 1
1回答
如何在绝对定位的div下浮动div (jsfiddle内部)
css、html
/* structure */
body {
margin:0;
padding:0;
}
#break {
clear:both;
}
/* header */
header {
padding:15px;
background:silver;
}
#avatar {
float:right;
}
#brand {
float:left;
}
/* nav */
nav {
clear:both;
}
#menu1 ul {
margin:0;
pad
浏览 0提问于2013-06-04得票数 0
3回答
将四个div放在一个包装器中，只有一个自己显示
css、html
我正在尝试创建一个包装器，里面有4个相邻的div(两个相邻，下面是剩下的两个)。然而，问题是，只有第四个正在显露出来。我试着设置overflow: hidden，玩弄display属性，也试着使用float:left和float:right。然而，到目前为止，还没有什么好消息。
这是我正在使用的css：
html, body{
width: 100%;
height: 100%;
}
#wrapper{
width: 60%;
height: 60%;
top: 20%;
left: 20%;
position: relative;
overflow: hidden;
border: 1px
浏览 0提问于2012-07-24得票数 0
回答已采纳
2回答
当滚动时，如果offsetTop是>=元素，那么做一些事情
javascript、jquery、css、resolution
我的页面有一个图像(#braille)，当滚动是0，滚动是> 0时，它在position:fixed上。当滚动是> 900时，其他一些元素就会褪色。我想要做的是在滚动时出现的两个元素之间的#盲文图像“停止”(用一个允许在两个元素之间正确定位的position:fixed将position:absolute改为position:absolute)。
我认为如果您查看我创建的JSFiddle (我添加了一个文本，当滚动时#盲文图像应该停止)：
以下是JS脚本：
$(function () {
var timeoutId = null;
// hide by defa
浏览 2提问于2015-07-03得票数 0
回答已采纳
2回答
绝对位置内的绝对位置:绝对定位的父块的宽度
css、position
这是我的代码。绝对位置内的绝对位置...当我给出position: relative;时，它会延伸到主体标记上，就像它是块级的一样，但当它被赋予position: absolute;时，它看起来就像是一个内联级别的元素……我不明白为什么？
div {
background: red;
margin: 0 0 0 50px;
font-size: 2em;
position: absolute;
}
span {
background: green;
color: #fff;
height: 100px;
position: absolute;
left
浏览 0提问于2017-06-22得票数 2
3回答
绝对div中的浮动div不会扩展父级。Clearfix似乎不起作用
html、css、css-float、css-position、clearfix
我有这个问题:在一个绝对定位的父div中有两个浮动div。
CSS：
.wrapper {
position: absolute;
left: 0;
top: 0;
overflow: hidden; /* doesn't do anything! */
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
HTML：
<div class="wrapper">
<div class="l
浏览 0提问于2012-03-27得票数 0
5回答
如何将另一个div内的div位置设置为右下角？
html、css
html
<div style="width:50%;overflow:hidden">
<div id="inboxHeader">
<div id="inboxCount"><p>Earth</p></div>
</div>
</div>
css
#inboxHeader{
background-color:yellow;
浏览 5提问于2014-04-01得票数 5
回答已采纳
2回答
overflow:隐藏不适用于ul中的li元素
html、css、overflow、html-lists
我正在尝试从ul对象创建一个carousel，其中li元素是块，ul是carousel容器。我已经尝试了两种方法，但neather似乎起作用了，overflow属性并没有像我希望的那样工作。
方法1：
<ul style="overflow:hidden; width:200px; height:120px; display:block;">
<li style="float:left; display:block; width:100px; height:100px; margin:0 20px 0 0; background
浏览 0提问于2009-08-19得票数 9
回答已采纳
3回答
CSS三角形边框
html、css、css-shapes
我正在尝试创建一个带有CSS的标签形状。使用以下代码，我可以正确显示左侧箭头的标签，如何将箭头移动到div的右侧而不是左侧？
HTML：
<div class="tags">
<a href="#">tag</a>
</div>
CSS：
.tags a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:11px;
margin-left:20px;
浏览 0提问于2013-02-27得票数 1
回答已采纳
3回答
CSS周围浮动的文本-div定位在
css、css-float、css-position
我有一个大的div，里面有一个小的div。我希望较小的div位于较大的div的底部。因此，我使用"bottom: 0px；left: 0px；position: absolute;“定位了小div，大div有"position: relative;”小div出现在它应该出现的位置，但文本不会在它周围浮动。我尝试过将"float: left;“与各种不同的显示方式结合使用，但似乎不起作用。
浏览 1提问于2013-09-22得票数 0
2回答
下拉菜单在标题下未对齐
jquery、html、css、drop-down-menu
我想在我的网站上添加一个下拉菜单。我这样做是通过将HTML组织成这样：
<ul class="topnav">
<li>
SECTION TITLE
<ul class="subnav">
<li>One</li>
<li>Two</li>
</ul>
</li>
</ul>
我有这样的CSS：
header ul.topnav li ul.subnav
浏览 3提问于2014-02-10得票数 0
回答已采纳
2回答
要遵循的CSS布局基础
css
我读过一些css教程。我也使用了一段时间的基本css。
我的问题是，你如何决定女巫css的使用。例如。如果你想在左边显示一个div框。你要么用。
float: left;
或
position: absolute;
另一种情况是，如果您在div中有一个段落标记，并且您想设置它的宽度或高度。你用
width: auto;
height: auto;
或
width: 100%;
height: 100%;
或
padding: 5px;
浏览 0提问于2012-03-08得票数 1
回答已采纳
2回答
firefox绝对定位问题
css、firefox、google-chrome、stylesheet、css-position
在firefox中，我无法正确地呈现这些内容。它很好地呈现在铬和野生动物。
<div style="" id="login_inline">
<form accept-charset="utf-8" action="/users/login" method="post" id="UserLoginForm">
<div style="display:none;">
<input type="hidden
浏览 1提问于2011-03-30得票数 5
回答已采纳
6回答
如何在页面上给出jQuery元素的绝对位置？
jquery、css、css-position
如何对jQuery元素应用绝对定位我当前的jQuery脚本是
<head>
...
<script type="text/javascript" src="slidemenu.js"></script>
<script type="text/javascript">
$('#sm').css({
position: 'absolute',
top: '10px',
浏览 0提问于2011-01-18得票数 8
1回答
.animate与DIV的混淆
jquery、html、css
我正在尝试创建一个简单的"Click on Div DIV Hide DIV -> Show another DIV“过程，但由于某种奇怪的原因，.animate函数不能正常工作。
jQuery("#main").animate({
height: "0px"
}, 1200 );
动画持续时间决定了div在这里被隐藏的时间(不知道为什么)意味着如果我离开它1秒，div将在1秒后返回到他的可见状态，它不会隐藏它比确定的动画持续时间更长，然后它会返回到原始状态。
下面是div结构：
HTML：
<div id="co
浏览 0提问于2011-11-21得票数 0
回答已采纳
1回答
为什么文本装饰停止了基于子元素的位置的继承？
html、css、inheritance、text-decorations
如果我有父div和子div，并且在父上设置了text-decoration:underline，这将适用于子div的文本内容。但是，如果我将子div设置为有position:absolute或position:fixed，则文本装饰将不再被继承。
我看了一下规范，但没有看到任何描述这件事的东西。此外，大多数地方，例如，都将text-decoration和text-decoration-line描述为非继承的，这让我想知道它为什么会起作用。尽管如此，这种行为在所有浏览器中似乎都是一致的，所以我假设我遗漏了一些东西。
请参阅下面的代码片段，在这里您可以使用按钮更改子div的css位置：
var
浏览 2提问于2016-09-14得票数 3
回答已采纳
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
腾讯云开发者
