标签: css-position
保持div:更改嵌套选择框时悬停打开
这是一个仅限IE的问题.你可以在这里看到问题(死链接)与IE(等待页面加载,并将NY Times图标悬停在左下角的工具栏中.然后尝试选择一个新选项).布局: .toolTip当它的父div悬停在它上面时变得可见.里面.toolTip是一个选择框.当用户打开选择框进行选择时,父元素将被隐藏.
为什么IE认为当我将鼠标悬停在选择框上时,我不再在父div上了？
以下是一些相关代码(为清晰起见,已减少):
#toolBar .toolTip {
position: absolute;
display:none;
background: #fff;
min-width: 300px;
}
#toolBar .socialIcon:hover .toolTip {
display:block;
}
和
<div id="toolBar">
<div class="socialIcon">
<span class="toolTip">
<h1>NY Times Bestsellers Lists</h1>
<div id="nyTimesBestsellers">
<?php include('/ny-times-bestseller-feed.php') ?>
</div>
<p>
<select id="nyTimesChangeCurrentList" name="nyTimesChangeCurrentList">
<option value="hardcover-fiction">Hardcover Fiction</option>
<option value="hardcover-nonfiction">Hardcover Nonfiction</option>
<option value="hardcover-advice">Hardcover Advice</option>
</select>
</p>
</span>
</div>
</div>
我试过的
将select元素移入和移出其他元素.更改此处涉及的select,option,p,span,div 的position和display属性.
推荐指数
解决办法
查看次数
如何从可变高度的"position:fixed"元素中清除内容？
我在网站上有一个标题,它的高度根据许多服务器端因素而变化.已经要求将标题修改为具有固定位置,以便当用户滚动页面时,标题保持在顶部.我正在position: fixed用来达到这个效果.问题是当标题变得太高时,它会覆盖某些内容的顶部(即使一直滚动到顶部).我可以将一个上边距应用于内容div以将其扩展到标题之外,但如前所述,边距的值将根据CSS不可用的许多因素而有很大差异.有一种简单的方法可以告诉浏览器在固定层下面呈现一部分内容吗？
我尝试过clear对内容应用,但是没有做任何事情.我知道我可以用Javascript做到这一点,但我正在寻找一个基于CSS的解决方案.
推荐指数
解决办法
查看次数
将跨度放在div中的特定位置
我在span标签中有3个标签(x,y和z)div,其中span z是div中的最后一个跨度.我希望span z中的文本显示在div的右下角.我怎样才能做到这一点？
我尝试了以下代码,但它不起作用:
<span align="right" style="font-size: 0.76em;" >my text here</span>
推荐指数
解决办法
查看次数
jQuery动画和z-index /相对定位的问题
我正在尝试使用position:relative来获取div以包含鼠标悬停时的其他div.不幸的是它只适用于最后一个div.如果将鼠标悬停在其他鼠标上,它们只会覆盖在它们之前声明的div.
代码在这里:http://jsfiddle.net/YuKaR/3/
绝对定位工作正常,但不幸的是我无法使用绝对定位这个特定的应用程序.
谁知道我做错了什么？感谢您的时间.
推荐指数
解决办法
查看次数
无法使用jQuery为我的div设置绝对位置
@Purmou
嗨,请考虑以下html5文件.div仍然位于0,0,边界也没有出现.我已尝试对随附的各种更改,但它似乎不起作用.
非常感谢Purmou和所有其他人阅读本文的帮助.问候,sbguy
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Absolute Positioning Test</title>
<style type="text/css">
html, body {
position:absolute;
top:0;
left:0;
margin:0px;
padding:0px 0px 0px 0px;
height:100%;
width:100%;
}
div {
margin:0px;
padding:0px 0px 0px 0px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/JavaScript">
var A_height = 100;
var A_width = 100;
var A_top = 20;
var A_left = 20;
var B_height = 100;
var B_width = 100;
var B_top = 200;
var B_left = 200;
jQuery("#A").css({
"position": …推荐指数
解决办法
查看次数
另一个div内的div(css定位)
这应该是一个非常简单的.我需要'橙色'div来始终覆盖100%宽度和100%高度.
在那个div中我需要'green'div来填充它的父级的100%宽度和高度,'orange'div.
此外,"橙色"div内部总是需要10px的"填充".
调整窗口大小时,每个div必须分别"调整大小",以便没有滚动条.
推荐指数
解决办法
查看次数
使用HTML中的图像将文本对齐到行的底部
嗨,我有像这样的内联图像的HTML
<p style="">
<img src="df9b4006-930e-45d7-8123-bec019a37800.png" height="178" width="112">text
</p>
但文本垂直居中于图像,我如何将其定位在同一行中图像的底部基线？
推荐指数
解决办法
查看次数
定位两个div,一个具有固定宽度(左div),另一个具有百分比(右div)
正如标题所说,我想在一行中水平放置两个div.左侧div具有固定宽度(包含图像),而右侧div应占据空间的其余部分.
CSS:
.container{
width:100%;
background-color:#000000;
height:auto;
}
.inner_left{
width:150px;
float:left;
height:250px;
background-color:#FF0000;
}
.inner_right{
float:left;
height:250px;
width:78%;
}
HTML:
<div class="container">
<div class="inner_left">test</div>
<div class="inner_right">Nam a congue risus. Mauris mattis facilisis nisi, eget convallis enim lobortis a. Curabitur non neque nec augue commodo ullamcorper sit amet et lorem! Proin tristique vitae lacus ut consectetur. In at convallis dolor, in laoreet dolor. Etiam in molestie enim! Nunc tincidunt pharetra magna, et sollicitudin enim sodales sed. Morbi pretium sollicitudin lorem, bibendum molestie …推荐指数
解决办法
查看次数
CSS轮廓宽度不起作用
我正在尝试将输入元素的轮廓宽度设置为焦点。不管我的设置如何，轮廓宽度都保持不变（就像它是无法更改的默认设置）。
这是css的一部分，我试图将焦点设置为轮廓宽度：
input:focus {
outline-width: 0.1px;
outline-color: #725b44;
}
编辑：
我只是忘了包括线条样式（实线，点线...）。现在可以了。一件事对我来说仍然很奇怪。为什么轮廓在元素内？不是将轮廓定义为“在元素周围（边界之外）绘制的线以使元素“突出”。”
这里从我的示例大纲看起来像这样。我以为它会在element周围，但它在里面：
推荐指数
解决办法
查看次数
为什么带有position：sticky的元素不会停留在父对象的底部？
我试图了解CSS的“粘性”功能。我可以让它坚持其父级的“顶部”，而不是其“底部”
我的测试代码是：
.block {
background: pink;
width: 50%;
height: 200px;
}
.move {
position: sticky;
bottom: 0;
}1111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>
<div class="block">
AAAA
<div class="move">
BBBB
</div>
</div>
222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>当我将“ move”设置为“ top：0”时，它停留在粉红色块的顶部，但是当我将其设置为“ bottom：0”时，它似乎不再固定/发粘。
推荐指数
解决办法
查看次数