标签: absolute

我似乎无法使用twitter bootstrap框架获得div在其父级中的绝对位置.我有一系列遵循以下方案的行

<div id='wrapper'>
<div class='row-fluid'>
    <div class='span2'>some content here</div>
    <div class='span9'>other content to the side of the first div</div>
    <div class='timestamp'>123456 this should align to the bottom right of wrapper</div>
</div>
</div>

CSS

.timestamp{
   position:absolute;
   bottom:0px;
   right:0px;
}

但是时间戳div总是将自己定位到整个dom文档的主体的绝对值,忽略任何中间div.是什么原因引起了这个？

我想把一个元素放在另一个元素下面.我position: absolute在CSS中使用.

 .first{
     width:70%;
     height:300px;
     position:absolute;
     border:1px solid red;
 }
.second{
    border:2px solid blue;
    width:40%;
    height:200px;
}

    <div class="first"></div>
    <div class="second"></div>

我希望蓝色框位于红色框下方.我怎么能实现这个目标？

我在溢出：滚动容器内有一个表格，表格内有一些按钮，当有人单击它们时，它们会显示上下文/工具提示（位置：绝对层）文本。

当我向右滚动并单击按钮时，它会向右移动，忽略滚动：

使容器相对位置解决了位置问题，但它出现在容器内而不显示菜单：

我需要帮助才能获得以下所需的行为：

这是片段：

.container{
  width:200px;
  height:100px;
  overflow:scroll;
  position:relative; /* removing this solves the problem, but .contextual moves to the original position */
}
.board{
  width:400px;
}
.contextual{
  display:none;
  position:absolute;
  width:100px;
  height:100px;
  margin: 20px;
  z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=container>
    <table class=board>
      <tr><td colspan=2>This board size (200) is bigger than its container size (100).</td></tr>
      <tr>
        <td>this is a button with a contextual element</td>
        <td>
          <input type=button value="click me" onclick="$('.contextual').show();" />
          <div class=contextual>This is a contextual help text.</div>
        </td> …

我在div框的底部有一个链接,其位置为:absolute,应覆盖整个div-box.

那样:http: //jsfiddle.net/UpwvT/4/

在FF和Webkit中它工作正常,但在IE + Opera中,"some text"仍然不是一个链接,也不是可点击的.

有人有想法吗？:) thanx

CSS3 flexbox或flex布局允许轻松地水平和垂直居中元素,即使其高度和宽度未知.

柔性布局是否可以用于在页面中心绝对定位叠加(未知高度和宽度)？

我需要从HTML输入生成PDF文件:

<div style="width: 14cm; height: 21cm; position: relative">
  <img src="bg-image.jpg" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0">
  <img src="image.jpg" style="width: 100px; height: 100px; position: absolute; left: 5cm; top: 5cm">
</div>

其中第一个图像是背景,第二个图像是用户输入(较小的照片).

问题是当我尝试使用mPDF库生成PDF文件时,图像不会显示在一个页面上,但是一个图像在第一页上,第二个图像在第二页上.所以我认为绝对定位不起作用,我不知道如何解决它.我不能将第一张图像用作背景图像,因为它的自然尺寸小于它必须填充的背景区域.

你能给我一些建议吗？怎么了？

我有一个小挑战,我没有在Stack Overflow上找到任何解决方案.

这就是我得到的:

这就是我喜欢它的方式:

为了产生这种标题效果,我正在使用绝对位置.我甚至不知道标题的宽度和高度.因此,使用此解决方案时大文本会中断.

我的HTML:

<div class="content">
  <h1 class="title">February 2015</h1>
  <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>

我的CSS:

.content { …

我正在开发一个可调整大小的页面,右侧有一个侧面菜单,它几乎与这个简单的例子一样:

http://pastehtml.com/view/1do8cy9.html

但问题是位置auto和min-width没有按预期反应.如果拖动浏览器窗口小于500px(最小宽度设置为),红色侧面菜单将继续覆盖绿色内容.

当达到最小宽度fx 500px时,如何使侧边栏停止？

以下是一个模拟iOS设备上看到的粘性标题效果的小脚本.

$('.scrolllist').scroll(function(){
        $(this).find('ul').each(function(){
            if($(this).position().top <= 0){
                $(this).addClass('abs').find('strong').removeClass('mov');

                if($(this).position().top <= ($(this).height() * -1)){
                    $(this).removeClass('abs');
                    $(this).find('strong').addClass('mov');            
                }
                else {
                    $(this).addClass('abs');
                    $(this).find('strong').removeClass('mov');   
                }
            }
            else {
                $(this).removeClass('abs').find('strong').removeClass('mov');
            }
        });
    });

它通过改变其状态改变每个元件的位置postion:absolute, top:0,以position:absolute, bottom:0;同时还改变含有<ul>从position:relative至position:static

示例:http://jsfiddle.net/dMJqj/80/

有什么办法可以使它平滑一点.它在Chrome和Firefox上看起来有点不稳定,有时可能需要几分之一秒来触发,这是显而易见的,因为粘性标题似乎闪烁.

绝对位置元素的标签索引

暂时，让我们假设我写了下面的代码：

    <header class="header hap" [ngClass]="authority">
        <div class="header-inner">
            <div class="header-identity">
                <a id="theLogo" class="logo" [routerLink]="[links.home]" title="Navigate to Home">
                    <img src="assets/logo-white.svg" alt="Logo">
                </a>
                <span class="client-logo" *ngIf="user.brandingImage && !user.isTheAdmin()">
                    <img class="brandingImage" [src]="user.brandingImage" [alt]="user.brandingName" onerror="this.style.display='none'">
                </span>
                [ more links ]
            </div>
            <nav class="main-nav for authenticated" [ngClass]="{'active':showMenu, 'app-only':!isCurrPageAdminApp()}">
                <button class="menu" (click)="toggleMenu()">Menu</button>
                <div class="main-nav-flyout" *ngIf="showMenu">
                    <div class="nav-header">
                        <ul>
                            <li>
                                <a id="main-nav-profile" [routerLink]="['/profile']"><span class="icon icon-user2"></span> My Profile</a>
                            </li>
                            [ more dropdown items ]
                        </ul>
                        <a id="main-nav-close" class="close"(click)="onClickMenuClose()"><span class="icon-cross"></span></a>
                    </div>
                    <div class="nav-body">
                        <ul *ngIf="isCurrPageAdminApp()" class="main-nav-list">
                            <li class="current-app">Administrative Tools</li> …