gpt4 book ai didi

css - 在另一个 div 中 float 一个移动的 div, overflow hidden ,css 修复?

转载 作者:太空宇宙 更新时间:2023-11-04 00:18:23 25 4
gpt4 key购买 nike

我在带有 overflow: hidden 的父 div 中有一个飞机 div,所以它看起来好像飞机 div 从页面上的一个元素下面飞过,并用它拖动横幅。

在这里查看我的图表:

Diagram

我已有的css代码是:

#plane{
width: 195px;
background-image: url(images/plane.png);
background-repeat: no-repeat;
height: 444px;
float: left;
position: relative;
top: 0px;
left: 0px;
}
#plane-holder {
height: 569px;
width: 960px;
overflow: hidden;
z-index: 2200;
display: inherit;
}

和 HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Netball Plane</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<div id="header"><div id="topbar"><img src="images/contact-us-bar.gif" width="960" height="45" /></div>
</div>
<div id="content"><div id="mainbody"><div id="menubar"><div id="logo"><img src="images/logo.gif" width="284" height="103" /></div>
<div class="menu">
Menu to go here
</div>
</div>
</div><div id="hero"><div id="information-that"><h1>Hello welcome to the site</h1>
<p></p><p>Some more text here.</p>
<p><img src="images/netball.png" alt="Rollover the netball for more information" width="187" height="46" border="0" /></p>
</div>
</div><div id="hero-shadow"></div><script type="text/javascript">
$(function(){
var iCounter = 1;
var iMaxCounter = 4;

$( '#plane' ).animate({
top: "-=450px",
left: "+=857px"
}, 30000, function(){
}
);
$('.slideshow').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
after:onAfter
});

});
</script>
<div id="plane-holder"><div id="plane"></div>
</div><div id="base-content"><div id="footer"></div>
</body>
</html>

但这显示为一个 block ,将这些 div 下面的其他元素推到页面下方。

您是否知道解决此问题的方法,使平面及其包含的 div 漂浮在我的网站上方?我试过设置 z-index,但这似乎不起作用。

最佳答案

可能你应该使用位置 relative+absolute设置 position: relativecontainer 上和 absolute (具有定义的 z-index)对于 #plane

放置#planetop/left/right/bottom属性

  • 一开始你有bottom : -<somepixels>, left : 0
  • 最后你有 top : 0, right : 0

这样做其他元素不会受到飞机存在的影响,留在你放置它们的地方

也可以使用 pointer-events: none如果你想允许 click/hover飞机背后的事件:见https://developer.mozilla.org/en/CSS/pointer-events (不幸的是,IE<=8 不支持它,尽管已经发布了一些 js 解决方法,例如 Lea Verou)

关于css - 在另一个 div 中 float 一个移动的 div, overflow hidden ,css 修复?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10281954/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com