标签: positioning

我有一个固定的标题。当我滚动时，某些元素会覆盖标题。我该如何控制？

我有以下问题：我的页面有一个包含项目的图像。我将隐藏的 div 放在项目上以创建鼠标悬停效果。我做 divs vith position relative 的定位。一切正常，但我在页面末尾有一个空白区域和一个滚动条:(

  <div style="height: 620px;">
    <?php echo image_tag('startpage/bg.png', array('style' => 'width: 124px; height: 620px; border:0;'))?><?php echo image_tag('startpage/startpage.png', array('style' => 'border:0;'))?><?php echo image_tag('startpage/bg.png', array('style' => 'width: 124px; height: 620px; border:0;'))?>
    <div id="start-circle" style="position:relative; border-radius: 40px; width:80px; height: 80px; top: -281px; left: 157px; background-color: #ffffff; opacity: 0; filter:alpha(opacity=0)">&nbsp;</div>
    <div id="segmentation-circle" style="position:relative; border-radius: 58px; width:115px; height: 115px; top: -377px; left: 286px; background-color: #ffffff; opacity: 0; filter:alpha(opacity=0)">&nbsp;</div>
      <div id="campaign-circle" style="position:relative; border-radius: 58px; width:115px; height: 115px; top: -490px; left: …

标准声明不继承top/ right/ bottom/ leftCSS属性.

CSS 2.1:http://www.w3.org/TR/CSS2/visuren.html#position-props
CSS定位模块:http://www.w3.org/TR/css3-positioning/#box-offsets-trbl

但从我所看到的(我测试了Firefox,Chrome,IE10和Opera),实现确实继承了这些属性.

HTML:

<div id="container">
  <div id="transition">Hello World</div>
</div>

CSS:

#container {
  position: absolute;
  left: 20px;
  top: 20px;
}

#transition {
  position: absolute;
  left: inherit;
  top: inherit;
}

这里,#transition元素接收其父top/ left值.

现场演示: http ://t.co/aIRuHPAj

我在这里错过了什么？

我有一个div黑色条和一个当前位于左侧的徽标图像作为此div的第一个子元素.徽标图像的高度大于黑色条的固定高度42,因此它突出(这是一种风格选择)

我想在黑条中包含一个菜单,所以我添加了一个UL菜单作为下一个子元素.但是,它位于黑色条形区域外的div的底部,因为它与徽标一致.

我想将菜单推到黑色区域上方的顶部

我已经尝试了所有可能的浮动组合,显示:内联/内联块,边距顶部,填充顶部等,但无济于事.

有人有解决方案吗？

谢谢!!!

HTML

<div id="black-bar">
    <a href="..." class="logo"><img src="..."></img></a>

        <ul>
            <li><a href="programs.shtml">Programs & Projects</a></li>
        <li><a href="recipes.shtml">Recipes</a></li>
        </ul>
</div>

CSS(这只是我试过的很多组合的拉特)

 #black-bar {
    text-align: left;
    background: #373737;
    height: 43px;
    padding-left: 60px;
    width: 100%;
    line-height: 119px; 
}

#black-bar .logo {
    float: left;
    margin-left: 0px;
    }


/* header menu */

#black-bar ul{
    line-height: 119px;
    display: inline;
    vertical-align: top;
}


#black-bar ul li{
    display: inline;

}

我想在固定高度的 div 中居中一些文本。

我做了以下小提琴

<div style="height:180px;border:1px solid black;vertical-align:middle;">
     <h1 style="vertical-align:middle;">Contact</h1> 
</div>

<div style="height:180px;border:1px solid black;vertical-align:middle;">
    <h2>Welcome to the</h2>
    <h1>AAA</h1>
    <h4>system</h4>
</div>

我尝试了 vertical-align:middle 的各种选项，将其应用于不同的元素，但似乎不起作用。

我确实看到了其他问题，其中 line-height 设置为与 font-size 相同的高度，但在第二个示例中，我有多行不同高度的文本。

有没有好的方法可以做到这一点？

使用 HTML 和 CSS，我在 ap 标签和图像之间有这个垂直空间。它看起来像这样：

看到“你好”和图像之间额外的垂直空间了吗？我该如何删除它？我知道我绝对可以将图像定位得更靠近“你好”，但我想知道是什么造成了这个空间。

我的代码：

HTML：

<div class="Box">
    <p> hello </p><img class="contextimg" WIDTH="50" HEIGHT="50"  SRC="pic.jpg">
</div>

CSS：

.Box                           //this is the parent div
{
    background-color:red;
    width:60px;
    margin:0px;
    margin-bottom: 0px;
    padding:0px;


}
.contextimg                            //this is for the image
{
    position:relative;
    margin:0px;
    padding:0px;
    line-height:0px;

}

注意：我也尝试将正文的边距和填充设置为 0，但没有成功。

在导航中，我有一个突出的红色框。我希望该红色框与所有Divs重叠。我为其设置了一个边距，以便将其与我放入黑盒中的其他元素隔开。问题在于它的边距还会影响单独元素的子元素的布局。当我向以下部分的子元素添加负边距时，它确实重叠了，但是我希望红色框位于顶部。我使用z-index，它似乎不起作用。

这是我在Jsfiddle上的示例：http : //jsfiddle.net/1qsuvhnd/29/

的HTML

<nav>
    <div id="ribbon"></div>    
</nav>
<div id="context">
    <div class="link"></div>
</div>

的CSS

#context {
    width: auto;
    padding: 20px;
    height: 300px;
    background-color: blue;
    z-index: 1;
}
#context .link {
    float: Left;
    height: 260px;
    width: 300px;
    margin-left: -140px;
    background-color: White;
    z-index:1 !important;
}
nav {
    width: auto;
    height: 65px;
    background-color: black;
    z-index:99 !important;
    clear:both;
}

nav #ribbon {
    float: left;
    margin: 0px 50px;
    Width: 65px;
    height: 130px;
    background-color: red;
    z-index= 99;
}

谁能让我知道div定位在JQuery中是如何工作的？

我想在绝对位置和其他所有位置显示div？就像在一个表单中我想要显示一个帮助弹出窗口显示在焦点文本框旁边(就像他们在careers.stackoverflow>编辑CV中一样).

同样,当您将鼠标悬停在头像上时,显示悬停卡的最佳策略是什么,例如当在Twitter上时,会出现一个带有用户个人资料摘要的小div.

谢谢

是否可以使用jQuery和CSS将某些内容(图像)移出浏览器区域？
因此,从用户的角度来看,图像似乎在浏览器之外.

我已经检查了许多与此类似的其他问题,但似乎没有解决方案可行.我有一个拥有正文的网站,然后是一个称为内容的内部div.我试过了:

body
{
    height: 100%;
}

content
{
    height: 100%;
}

和

body
{
}

content
{
    position: absolute;
    top: 0px;
    bottom: 0px;
}

这是大多数问题的答案.但由于某种原因,它不适合我们.当我们使用绝对定位进行强制时,它会延伸到超过页面长度,并且当我们希望它居中时也将我们的内容推向左侧(使用margin-left:auto; margin-right:auto;)

有什么建议？