标签: css-position
HTML/CSS:<fieldset>中元素的绝对定位
绝对是绝对的还是不绝对的？
我正在尝试使用嵌套元素创建一个输入表单,每个元素包含其他元素,但它不能正确显示(根据屏幕标尺(和肉眼)).
HTML是有效的,所以这是一个"好吧,它是绝对的,但只相对于它包含文件夹"的案例或者其他一些？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<body>
<form action="C:\temp\a_test.php" method="get"><div class="TGroupBox" id="GroupBox1">
<fieldset style="position: absolute; top:24px; left:24px; width: 449px; height: 473px;">
<legend>GroupBox1</legend>
<div class="TPanel" id="Panel1">
<fieldset style="position: absolute; top:64px; left:64px; width: 361px; height: 217px;">
<legend></legend>
<div class="TComboBox" id="ComboBox1" style="position: absolute; top:88px; left: 256px; width: 145px; height: 21px;">
<select name="ComboBox1">
<option value="- one -" selected="selected">- one -</option>
<option value="- two -">- two -</option>
<option value="- three -">- three -</option>
</select>
</div> …推荐指数
解决办法
查看次数
带来绝对定位的子菜单？
我有一个ID #navigation与position: relative;和它里面的一类.submenu带position:absolute;.子菜单包含文本(<a>更具体地说是标记链接),这些文本已经失去了它们的cursor: pointer;属性,并且在它们的帐户上被选中的能力现在位于页面上的其他元素之后.
这是一个链接,以便您可以实际看到我在说什么:
http://pixelation.me/show/stackoverflow/
我不知道我能做什么,没有声明#navigation和页面底部的所有孩子,以便.submenu"走到前面".
我已经尝试过设置z-index: 1; 在.submenu,这没用.
任何更多的建议/答案将不胜感激;)!
推荐指数
解决办法
查看次数
如何停止与固定位置标题重叠的嵌入视频
我在一个带有固定标题的页面上嵌入了几个YouTube视频,它们在滚动时重叠.我没有任何其他内容的这个问题.
我尝试过zindex,它不适用于position:fixed元素.我也尝试在embed标签中键入wmode:transparent,这也没有用
任何帮助将非常感激
推荐指数
解决办法
查看次数
为什么Firefox 16.0.2下的绝对位置不正确
请看这个小提琴
升级到FF 16.0.2后,绝对位置有问题.
有什么建议？
Html部分
<table>
<tr>
<td>
<div>
Product 1
<span>Button</span>
</div>
</td>
<td>
<div>
Product 2
<span>Button</span>
</div>
</td>
</tr>
CSS部分
tr { height:250px; }
td {
position:relative;
width:200px;
text-align:center;
border:1px solid #999;
}
div {
position:absolute;
top:10px; bottom:10px; left:10px; right:10px; /* as padding */
}
span {
position:absolute; bottom:0; left:50px;
width:90px; height:20px;
padding: 5px 0;
background:#ccc;
}?
我想要显示的是这样:
推荐指数
解决办法
查看次数
移动浏览器中Div绝对定位的问题
我在下面的网站上有很多问题绝对定位一个名为id ="verticalGenesis"的div:http: //genesispetaluma.com/index.html在移动浏览器中,包括iPhone上的Safari和Chrome.理想情况下,我尝试使用以下css将徽标放置在屏幕右侧:
#verticalGenesis {
background-image: url("../img/Genesis%20Text.gif");
background-repeat: no-repeat;
display: block;
height: 570px;
opacity: 0.8;
position: absolute;
right: 3%;
top: 70px;
width: 123px;
}
这在所有桌面浏览器中都可以正常显示,就像我期望的那样,但是在移动浏览器的屏幕中间出现.我已尝试使用正确的:3%,但我遇到了同样的问题.
我确信必须有一个简单的答案来解决这个问题,但我已经在网上和堆栈溢出的各个地方进行了搜索,我无法弄清楚这一点.有人可以指点我正确的方向吗？
谢谢,
克里斯
推荐指数
解决办法
查看次数
CSS定位,需要一些建议
这是我的HTML代码
<div id="container">
<div id="topleft"></div>
<div id="topright"></div>
<div id="bottomleft"></div>
<div id="bottomright"></div>
</div>
这是我的css代码
#container{
width: 400px;
height: 400px;
background-color: red;
margin: 0 auto;
}
#topright{
width: 50px;
height: 50px;
background-color: black;
position: relative;
top:0px;
right:0px;
}
#topleft{
width: 50px;
height: 50px;
background-color: black;
position:relative;
top:0px;
left:350px;
}
#bottomright{
width: 50px;
height: 50px;
background-color: black;
position: relative;
top:250px;
right:0px;
}
#bottomleft{
width: 50px;
height: 50px;
background-color: black;
position:relative;
top:250px;
left:350px;
}
这是输出 http://s23.postimg.org/dhgy9mpq3/image.png
我需要获得的是,所有4个黑色方块都位于红色方块的角落,就像在这张图片中一样,我应该更改或添加代码？THX http://postimg.org/image/r5kv15l5v/
推荐指数
解决办法
查看次数
文字覆盖图像html css
我正在尝试在HTML中设置图像并希望文本在其上运行.但是,当我使用以下代码时,文本将在图像下运行.
HTML
<div id="titel">
<img src="images/titel.jpg" alt="titel">
<h3>Titel</h3>
</div>
CSS
#titel
{
float:left;
width:220px;
height:100px;
margin:0px 5px 5px;
}
h2
{
position:absolute;
}
推荐指数
解决办法
查看次数
具有相对位置和负顶值的元素下方的元素保持不变
我有3个元素一个在另一个上面.如果我给第二个(粉红色)一个相对位置和负顶值它超过第一个.但第三个没有"跟随",仍然保持原样:
HTML:
<div id='div1'>text</div>
<div id='div2'>text</div>
<div id='div3'>text</div>
CSS:
div {
padding: 50px;
}
#div1 {
background: yellow;
}
#div2 {
background: pink;
position: relative;
top: -50px;
}
#div3 {
background: gray;
}
如何使第三个和它下面的任何其他元素"跟随"粉红色元素？
推荐指数
解决办法
查看次数
CSS:flexbox第一个孩子到左边休息到中心
我正在玩flexboxCSS.我正在尝试创建导航菜单.我希望菜单的第一项位于最左侧,其余项目位于中心.目前我的一切都在中心.要在中心对齐内容我正在使用justify-content: center容器.
但我不知道我可以调整特定项目flex-box.我试过float它但是因为float不是为了对齐而且float也不能用于flexbox项目.有没有办法/解决方法来实现这一目标？谢谢.这是可以玩的笔.
body{
background: #e0f080;
color: white;
font-weight: bold;
font-size: 1em;
}
.flex-container {
display: -webkit-flex;
display: flex;
background-color: tomato;
color: white;
font-weight: bold;
font-size: 1em;
justify-content: center;
}
.flex-item{
align-content: space-around;
margin: 10px;
border: 2px solid white;
padding: 5px;
}
.menu{
order: -1;
align-self: start;
font-size: 3em;
}
推荐指数
解决办法
查看次数
如何只获取<li>文本而不从li中的其他元素获取文本
我有一个ul列表,里面li有li文字,里面有文字div.sameclass被赋予liwhile div,并被赋予不同的类名.
我只是想从而li不是从中获取文本div.这是片段:
$("ul li").on('click', function() {
$("span").text($(this).text());
});ul {
position: relative
}
div {
position: absolute;
right: 0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class='same'>Text1
<div class='notsame'>Other text</div>
</li>
<li class='same'>Text2
<div class='notsame'>Other text</div>
</li>
<li class='same'>Text3
<div class='notsame'>Other text</div>
</li>
</ul>
<span> </span>我得到了O/P,而且div里面的文字也是如何避免的？
推荐指数
解决办法
查看次数