我有一个通过javascript更改聚焦的元素显示绝对值并覆盖其父元素。然后在模糊回到默认的表格单元格。
似乎发生的事情是元素只是位于第一个表格单元格下方，它不会回到原来的位置？
这似乎只发生在webkit中，而我却陷入了搜索的困境。任何帮助将不胜感激。
效果可以在顶部的搜索中找到。
提前致谢
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!doctype html>
<!--[if lt IE 7]><html class="no-js ie6 oldie" lang="en"><![endif]-->
<!--[if IE 7]><html class="no-js ie7 oldie" lang="en"><![endif]-->
<!--[if IE 8]><html class="no-js ie8 oldie" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<link rel="shortcut icon" href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/favicon.png?4100640853928591395" type="image/png" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta name="geo.region" content="GB-DNC" />
<meta name="geo.placename" content="Doncaster" />
<meta name="geo.position" content="53.540019;-1.148724" />
<meta name="ICBM" content="53.540019, -1.148724" />
<title>Jazz Shoes</title>
<meta name="msvalidate.01" content="2586BFC237E15118F8BA18EF91E843A0" />
<meta name="p:domain_verify" content="9c7f882b38741d1a00862559ee7a8614"/>
<meta property="og:image" content="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/logo.png?4100640853928591395" />
<link rel="stylesheet" href="http://detc.s3.amazonaws.com/assets/stylesheets/bootstrap/bootstrap.css">
<link href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/styles.scss.css?4100640853928591395" rel="stylesheet" type="text/css" media="all" />
<link href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/custom.scss.css?4100640853928591395" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/modernizr.js?4100640853928591395" type="text/javascript"></script>
<script src="//use.typekit.net/fuf1mwq.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
</head>
<body>
<!-- Begin toolbar -->
<header class="navbar-fixed-top top-banner toolbar-wrapper">
<div class="container">
<nav class="de-nav">
<a class="logo" href="/">
<div class="de-logo"></div>
</a
><ul class="nav-primary"><li class="nav-item">
<div class="dropdown">
<a href="http://www.dance-etc.co.uk/collections/whats-new" class="dropdown-toggle"><span>Whats New</span></a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a href="#" class="subhead">New In</a>
<ul class="submenu">
<li><a href="#">Mirella Leotards</a></li>
<li><a href="#">Pointe Shoes</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#" class="subhead">Don't Miss</a>
<ul class="submenu">
<li><a href="#">Jozette by Mirella Laser Cut Camisole Leotard</a></li>
</ul></li>
</ul>
</div>
</div>
</div>
</li><li class="nav-item">
<div class="dropdown">
<a href="#" role="button">
<span>Bodywear</span>
</a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="http://www.dance-etc.co.uk/collections/leotards">Leotards</a>
<ul class="submenu">
<li><a href="#">Basic</a></li>
<li><a href="#">Classic</a></li>
<li><a href="#">Fashion</a></li>
<li><a href="#">Premium</a></li>
<li><a href="#">Regulation</a></li>
<li><a href="#">Catsuits</a></li>
</ul>
</li>
<li>
<a class="subhead" href="#">Dancewear</a>
<ul class="submenu">
<li><a href="#">Tops</a></li>
<li><a href="#">Warmups</a></li>
<li><a href="#">Underwear</a></li>
<li><a href="#">Shorts</a></li>
</ul>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">Childrens Dancewear</a></li>
<li><a class="subhead" href="#r">Street Dancewear</a></li>
<li><a class="subhead" href="#">Gymnastics</a></li>
<li><a class="subhead" href="#">Tutu's & Dresses</a></li>
</ul>
</div>
<div class="divider"></div>
<div class="wrapper featured">
<div class="subhead">Dont Miss...</div>
<ul>
<li class="featured-item">
<a href="#"><img src="#" alt="Tappers & Pointers Leotard"><p>tappers & pointers</p></a>
</li>
<li class="featured-item">
<a href="#"><img src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/sodanca-tank-leotard-with-striped-mesh.jpg?4100640853928591395" alt="Dodanca tank leotard with striped mesh"><p>sodanca<br></p></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li><li class="nav-item">
<div class="dropdown">
<a href="http://www.dance-etc.co.uk/collections/dance-shoes" class="dropdown-toggle" role="button"><span>Footwear</span></a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">Ballet Shoes</a>
</li>
<li>
<a class="subhead" href="#">Pointe Shoes</a>
<ul class="submenu">
<li> <a href="#">By Bloch</a></li>
<li> <a href="#">By Capezio</a></li>
<li> <a href="#">By Freed</a></li>
<li> <a href="#">By Merlet</a></li>
<li> <a href="#">By Russian Pointe</a></li>
<li> <a href="#">Warm Up Boots</a></li>
<li> <a href="#">Pointe Accessories</a></li>
</ul>
</li>
<li>
<a class="subhead" href="#">Modern, Lyrical & Contemporary</a>
</li>
<li>
<a class="subhead" href="#">Dance Sneakers</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Jazz Shoes</a>
</li>
<li>
<a class="subhead" href="#">Tap Shoes</a>
</li>
<li>
<a class="subhead" href="#">Character Shoes</a>
</li>
<li>
<a class="subhead" href="#">Ballroom</a>
</li>
</ul>
</div>
</div>
</div>
</div></li></ul>
<ul class="nav-primary mobile">
<li class="nav-item"
><div class="dropdown">
<a href="#">
<span>Shop</span>
</a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">All Dancewear</a>
<li><a class="subhead" href="#">Bodywear</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Footwear</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Legwear</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul
>
<div id="global-search" class="nav-search">
<form class="site-search" role="search" method="get" action="/search">
<div class="wrapper">
<label for="q"><i class="fa fa-search"></i></label>
<input type="text" id="q" name="q" class="">
</div>
<input type="hidden" name="type" value="product" />
</form>
</div><ul class="nav-secondary"><li class="nav-item nav-item-account">
<div class="dropdown">
<a href="#" class="dropdown-toggle"><span>My Account</span></a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul><a href="#">My Account</a></ul>
<ul><a href="#">My Orders</a></ul>
</div>
</div>
</div>
</div>
</li><li class="nav-item nav-item-cart">
<div class="dropdown">
<a href="/cart" class="dropdown-toggle bag"><span>£0.00<i class="bag-count">0</i></span></a>
</div>
</li></ul>
</nav>
</div>
</header>
<!-- End toolbar -->
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.flexslider-min.js?4100640853928591395" type="text/javascript"></script>
<!-- <script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.zoom.js?4100640853928591395" type="text/javascript"></script> -->
<script src="http://detc.s3.amazonaws.com/bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.bootplus.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/cloudzoom.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.tweet.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.fancybox.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/scripts.js?4100640853928591395" type="text/javascript"></script>
</body>
</html>
答案 0 :(得分：6)
你有一个类似于结构的表，但你没有任何table row。将显示设置为table-row元素上的de-nav似乎可以解决您的问题。
.de-nav {
display: table-row
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!doctype html>
<!--[if lt IE 7]><html class="no-js ie6 oldie" lang="en"><![endif]-->
<!--[if IE 7]><html class="no-js ie7 oldie" lang="en"><![endif]-->
<!--[if IE 8]><html class="no-js ie8 oldie" lang="en"><![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<link rel="shortcut icon" href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/favicon.png?4100640853928591395" type="image/png" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta name="geo.region" content="GB-DNC" />
<meta name="geo.placename" content="Doncaster" />
<meta name="geo.position" content="53.540019;-1.148724" />
<meta name="ICBM" content="53.540019, -1.148724" />
<title>Jazz Shoes</title>
<meta name="msvalidate.01" content="2586BFC237E15118F8BA18EF91E843A0" />
<meta name="p:domain_verify" content="9c7f882b38741d1a00862559ee7a8614" />
<meta property="og:image" content="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/logo.png?4100640853928591395" />
<link rel="stylesheet" href="http://detc.s3.amazonaws.com/assets/stylesheets/bootstrap/bootstrap.css">
<link href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/styles.scss.css?4100640853928591395" rel="stylesheet" type="text/css" media="all" />
<link href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/custom.scss.css?4100640853928591395" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/modernizr.js?4100640853928591395" type="text/javascript"></script>
<script src="//use.typekit.net/fuf1mwq.js"></script>
<script>
try {
Typekit.load();
} catch (e) {}
</script>
</head>
<body>
<!-- Begin toolbar -->
<header class="navbar-fixed-top top-banner toolbar-wrapper">
<div class="container">
<nav class="de-nav">
<a class="logo" href="/">
<div class="de-logo"></div>
</a>
<ul class="nav-primary">
<li class="nav-item">
<div class="dropdown">
<a href="http://www.dance-etc.co.uk/collections/whats-new" class="dropdown-toggle"><span>Whats New</span></a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a href="#" class="subhead">New In</a>
<ul class="submenu">
<li><a href="#">Mirella Leotards</a>
</li>
<li><a href="#">Pointe Shoes</a>
</li>
<li><a href="#">Accessories</a>
</li>
</ul>
</li>
<li><a href="#" class="subhead">Don't Miss</a>
<ul class="submenu">
<li><a href="#">Jozette by Mirella Laser Cut Camisole Leotard</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item">
<div class="dropdown">
<a href="#" role="button">
<span>Bodywear</span>
</a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="http://www.dance-etc.co.uk/collections/leotards">Leotards</a>
<ul class="submenu">
<li><a href="#">Basic</a>
</li>
<li><a href="#">Classic</a>
</li>
<li><a href="#">Fashion</a>
</li>
<li><a href="#">Premium</a>
</li>
<li><a href="#">Regulation</a>
</li>
<li><a href="#">Catsuits</a>
</li>
</ul>
</li>
<li>
<a class="subhead" href="#">Dancewear</a>
<ul class="submenu">
<li><a href="#">Tops</a>
</li>
<li><a href="#">Warmups</a>
</li>
<li><a href="#">Underwear</a>
</li>
<li><a href="#">Shorts</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">Childrens Dancewear</a>
</li>
<li><a class="subhead" href="#r">Street Dancewear</a>
</li>
<li><a class="subhead" href="#">Gymnastics</a>
</li>
<li><a class="subhead" href="#">Tutu's & Dresses</a>
</li>
</ul>
</div>
<div class="divider"></div>
<div class="wrapper featured">
<div class="subhead">Dont Miss...</div>
<ul>
<li class="featured-item">
<a href="#">
<img src="#" alt="Tappers & Pointers Leotard">
<p>tappers & pointers</p>
</a>
</li>
<li class="featured-item">
<a href="#">
<img src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/sodanca-tank-leotard-with-striped-mesh.jpg?4100640853928591395" alt="Dodanca tank leotard with striped mesh">
<p>sodanca
<br>
</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item">
<div class="dropdown">
<a href="http://www.dance-etc.co.uk/collections/dance-shoes" class="dropdown-toggle" role="button"><span>Footwear</span></a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">Ballet Shoes</a>
</li>
<li>
<a class="subhead" href="#">Pointe Shoes</a>
<ul class="submenu">
<li> <a href="#">By Bloch</a>
</li>
<li> <a href="#">By Capezio</a>
</li>
<li> <a href="#">By Freed</a>
</li>
<li> <a href="#">By Merlet</a>
</li>
<li> <a href="#">By Russian Pointe</a>
</li>
<li> <a href="#">Warm Up Boots</a>
</li>
<li> <a href="#">Pointe Accessories</a>
</li>
</ul>
</li>
<li>
<a class="subhead" href="#">Modern, Lyrical & Contemporary</a>
</li>
<li>
<a class="subhead" href="#">Dance Sneakers</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Jazz Shoes</a>
</li>
<li>
<a class="subhead" href="#">Tap Shoes</a>
</li>
<li>
<a class="subhead" href="#">Character Shoes</a>
</li>
<li>
<a class="subhead" href="#">Ballroom</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="nav-primary mobile">
<li class="nav-item">
<div class="dropdown">
<a href="#">
<span>Shop</span>
</a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">All Dancewear</a>
<li><a class="subhead" href="#">Bodywear</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Footwear</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Legwear</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
<div id="global-search" class="nav-search">
<form class="site-search" role="search" method="get" action="/search">
<div class="wrapper">
<label for="q"><i class="fa fa-search"></i>
</label>
<input type="text" id="q" name="q" class="">
</div>
<input type="hidden" name="type" value="product" />
</form>
</div>
<ul class="nav-secondary">
<li class="nav-item nav-item-account">
<div class="dropdown">
<a href="#" class="dropdown-toggle"><span>My Account</span></a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul><a href="#">My Account</a>
</ul>
<ul><a href="#">My Orders</a>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item nav-item-cart">
<div class="dropdown">
<a href="/cart" class="dropdown-toggle bag"><span>£0.00<i class="bag-count">0</i></span></a>
</div>
</li>
</ul>
</nav>
</div>
</header>
<!-- End toolbar -->
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.flexslider-min.js?4100640853928591395" type="text/javascript"></script>
<!-- <script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.zoom.js?4100640853928591395" type="text/javascript"></script> -->
<script src="http://detc.s3.amazonaws.com/bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.bootplus.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/cloudzoom.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.tweet.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.fancybox.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/scripts.js?4100640853928591395" type="text/javascript"></script>
</body>
</html>