标签: positioning

如何选择与绝对定位DIV重叠的选项?

我有一个绝对定位的div,就像工具提示一样.鼠标悬停在它显示的元素上,然后隐藏鼠标.我<select>在页面中有很少的元素放在工具提示元素上面.在正常情况下,工具提示div将显示在选择标记上.但是,当用户单击选择标记并显示选项时,它会与工具提示重叠.为select或options标记提供更高的z-index不起作用.

在此输入图像描述

这是一个示例代码来说明问题.

<body>
<h1>Select Options Overlapping Absolute Positioned DIV</h1>

<select name="some-name">
    <option>United States</option>
    <option>Canada</option>
    <option>Mexico</option>
    <option>Japan</option>
</select>

<div id="top-layer">
   <h2>Overlapping Div</h2>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)

CSS

select, options{ z-index:10;}

#top-layer { 
   background:#ccc; 
   color:#000; 
   border:solid 1px #666; 
   position:absolute; 
   top:45px; 
   left:70px; 
   z-index:100;
}
Run Code Online (Sandbox Code Playgroud)

html css positioning z-index

17
推荐指数
1
解决办法
1万
查看次数

CSS:将相对定位父级与绝对定位子项的高度相匹配

我正在尝试构建一个简单的幻灯片.到目前为止,基本标记看起来像这样:

<h1>My Slideshow</h1>

<p>This paragraph behaves as expected.</p>

<div class="slide-container">
  <div class="slide">
    <h2>First Slide</h2>
    <p>Some stuff on this slide…</p>
  </div>

  <div class="slide">
    <h2>Second Slide</h2>
    <p>And some more stuff here…</p>
  </div>
</div>

<p>This paragraph will disappear beneath the stacked images.</p>
Run Code Online (Sandbox Code Playgroud)

这是相应的CSS:

.slide-container {
  position: relative;
}

.slide {
  position: absolute;
  top: 0;

  /* just for the looks */
  width: 20em;
  padding: 0 1em;
  border: 1px solid steelblue;
  background: white;
}
Run Code Online (Sandbox Code Playgroud)

问题是,.slide-container它不适合其孩子(或孩子)的身高.slide(见截图).

在此输入图像描述

我知道我可以设置.slide-container手动的高度,但我想把它放在流体网格中,其中高度是可变的.有没有办法实现这个目标?

css positioning

17
推荐指数
2
解决办法
1万
查看次数

为什么z-index不适用于div?

我试图让我的页脚显示在页脚背景之上,但z-index似乎不起作用.有谁看到它有什么问题?http://jsfiddle.net/f2ySC/

css positioning

17
推荐指数
2
解决办法
3万
查看次数

将子div扩展到容器div之外

我正试图通过浏览器的宽度扩展这个div.我从这里读到 你可以{position:absolute; left: 0; right:0;}用来实现这个,就像在这里的jsfiddle:http: //jsfiddle.net/bJbgJ/3/

但问题是我的当前#container有一个{position:relative;}属性,因此如果我申请{position:absolute}子div,它只会引用#container.有没有办法让我的孩子潜水超过#container

css positioning css-position css3

17
推荐指数
2
解决办法
4万
查看次数

然后滚动到顶部

只是想知道是否有人知道我如何重新创建我刚才看到的导航栏样式,我刚刚找到了我看到它的网站,但我不确定它们是如何到达那里的.基本上希望它与页面滚动然后锁定到顶部...

http://lesscss.org/

javascript jquery positioning

16
推荐指数
3
解决办法
2万
查看次数

仅在一个方向上固定位置

所以,基本上,我想要一个固定在页面底部的项目,但是当视图水平滚动时,它也应该水平滚动.

我可以用JavaScript来解决这个问题,但有没有CSS方法可以做到这一点?我不介意在这里和那里多一些额外的DIV.

css jquery positioning

15
推荐指数
1
解决办法
1万
查看次数

图像"显示:阻止"的缺点?

img使用display: blockCSS属性从内联块元素转换为块对象有什么缺点吗?

大多数时候,我希望它们成为block元素.inline我失去的任何有用的方面?(也许我没有看到一些有用的东西?)

是否应该将所有图像block默认转换为元素?为什么根据规范它们是内联块元素?

PS我想通过定位和浮动以及周围元素来考虑布局.

css positioning image css-float responsive-design

15
推荐指数
2
解决办法
2万
查看次数

从下到上<ul>元素排列

我试图找出如何强制元素从底部开始到顶部.

我已经搜索了stackoverflow,我似乎无法得到我需要的答案.这张图应该解释一下:

解释图像

这也应该有所帮助:

<?php require("connectdb.php"); ?>

<!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>jQuery Dynamic Drag'n Drop</title>
<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="javascript/jquery.ui.ipad.altfix.js"></script>


<style>
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin-top: 10px;
}

ul {
    margin: 0;
}

#contentWrap {
    width: 800px;
    margin: 0 auto;
    height: 500px;
    overflow: hidden;
    background-color: #FFFFFF;
    border: solid 2px #EEEEEE;
}

#contentTop {
    width: 600px;
    padding: 10px;
    margin-left: 30px;
}

#sortable …
Run Code Online (Sandbox Code Playgroud)

html css positioning html-lists

14
推荐指数
1
解决办法
3262
查看次数

自下而上的jQuery砌体

有谁知道如何从下往上制作jQuery砌体堆栈?我写了一些基本的JS来自下而上堆叠东西,但是它不能像在最短的列上堆叠下一块砖和跨越多列的砖块那样做一些粗糙的东西.由于我对Math不熟悉,查看源代码只会让我头晕目眩.

从下往上堆叠

有人想试试吗?

javascript css jquery positioning jquery-masonry

13
推荐指数
1
解决办法
3221
查看次数

动画jQuery Ui位置()

如何使用当前位置设置动画position({of:,my:,at:})?有没有办法自动化该过程,还是我必须手动设置CSS属性的动画?

css jquery user-interface positioning jquery-animate

13
推荐指数
2
解决办法
2966
查看次数