标签: css-position

我有这样的布局：

<div class='one'>
   <div class='two'>
       <div class='three'>some text</div>
   </div>
</div>

是否可以根据oneCSS 中的祖父元素 ( )设置三个的相对位置？

看看这个：http : //jsfiddle.net/chalist/H48Je/

我想有一些div的相对定位，具有外容器，并漂浮在一个线。

实现这一目标的唯一方法是向左浮动，我认为对吗？但是如果我这样做，如果元素大于容器宽度，它会换行...

这里的代码：（请不要介意语法错误）

<div style="position:relative;width:300px;height:300px;overflow:scroll">
 <div id="1" style="position:relative;width:200px;height:50px;float:left;"></div>
 <div id="2" style="position:relative;width:200px;height:50px;float:left;"></div>
</div>

id 为 2 的 Div 将换行...如何避免这种情况？

我在尝试将图像和 h1 标签在一行上对齐时遇到问题。我试过 display: inline 和 inline-block 它们不起作用，只能制作两者的容器。我在该部分将宽度添加到 100%，但仍然没有。Float 也不起作用，如果它起作用，它会破坏页面的对齐方式。我究竟做错了什么？在此处查看我的完整源代码：http : //jsfiddle.net/TheAmazingKnight/bkmyv/

HTML

<section>
    <img id="me" src="assets/img/pose1.jpg" alt="A photo of me." />
    <h1>FOLLOW ME ON...</h1>
</section>

CSS

section{
display:inline-block;
width:100%;
}
h1{
font-weight:bold;
font-size:40px;
color:#FFFFFF;
background-color:#FFB405;
display:inline-block;
}

请看下面的例子

http://jsfiddle.net/GANeX/90/

我想在 .out 之外显示我的绿色 divwrapper。我无法更改 div 的位置，wrapper因为还保存了一些其他内容，当我们将 更改为inner-wrapper时，这些内容可能会出现。position:relativeposition:static

我怎样才能做到这一点？

我在某种条件下（基本上如果用户向上滚动）设置位置固定的元素和其他 css 的样式，但该元素的行为类似于相对定位的元素。换句话说，它随页面滚动而不是保持固定。

我尝试隔离此问题，但此问题仅存在于整个网站中，我需要它在该网站中工作。

var lastScrollTop = 0;
$(window).scroll(function(){
    var st = $(this).scrollTop();
    if(st<=lastScrollTop){
        //scroll up
        if($(this).scrollTop()>235) $('#searchInput').removeClass('slideIn').addClass('stickySearch');
        else $('#searchInput').removeClass('stickySearch').addClass('slideIn');
    }
    else $('#searchInput').removeClass('stickySearch').removeClass('slideIn');
    lastScrollTop = st;
});

目前，该类.slideIn没有与之关联的样式，但.stickySearch确实如此。这是CSS：

.stickySearch{
    width:56% !important;
    position:fixed !important;
    left:0;
    right:0;
}

我检查了开发人员工具，正在应用类并且正在应用样式，但固定的位置不起作用。

这是一个实时网址： http: //goo.gl/ns6UEQ

请注意，窗口的高度较小会很有帮助，以便您可以滚动。向下滚动，使标题隐藏在顶部，然后向上滚动，搜索栏应该出现，但当标题返回视图时，搜索栏将回到标题中的位置。

我有一个图像，它可能会根据某些操作和我想要position在img标签上的几个 div 改变其位置。

简化后的代码如下：

<div>
    <img src="someRandomImageUrl">
    <div>foobar</div>
</div>

为了更好地理解，想象一下我有一个在中心周围有一个小方块的图像，并且无论我将图像放在哪里，我都希望将 foobar 消息放置在图像方块中。有任何想法吗？

我希望看到一个页面的页脚所有的时间。所以我想要它粘。它不应该取决于页面上有多少内容。所以我想出了position:fixed和bottom:0。当然，这可以正常工作，但我不希望页脚位于浏览器底部，而是位于文档正文底部。

黑色边框是浏览器窗口

演示（jsfiddle）

有没有办法实现这一目标？

我已经达到了我想要的结果。但这不是正确的方法。例如，如果我的父容器改变了宽度，这个 hack 将不起作用。但是，我这样做只是为了将其显示在屏幕上，以尝试在浏览器中以正确的方式解决问题。

在此处查看屏幕截图

HTML

<div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <div class="product-wrapper">
                            <div class="product-card">
                                <a href="lathes-single.html" class="product-img-wrapper"><img src="../assets/img/46-455.jpg" alt=""></a>
                                <h4> 46-460 12 1/2 in. Variable Speed MIDI-LATHE® </h4>
                                <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                                <a href="lathes-single.html" class="btn btn-lg btn-primary">View Product</a>
                            </div>
                        </div>
                    </div>
                </div>
</div>

对不起，我古怪的间距。出于某种原因，从 Sublime Text 3 中粘贴出来的东西，一旦来到这里，一切都会被顶起来。

相关 CSS

.product-img-wrapper {
   text-align: center;
}

.product-img-wrapper img {
    width: …

我将这个 div 设置为两个小标志来选择页面的语言。它们固定（粘性）在屏幕的右上角。问题是当我滚动时，因为它们隐藏在其他元素（例如图像或背景颜色）后面。如何让他们不再隐藏？我尝试将父类设置为“导航栏”并且以某种方式起作用，但是当屏幕缩小时元素会收起来。

#flags {
  position: fixed;  	
}

<div style=" float: right; width: 100px; margin-top: 60px;">
  <div id="flags">
    <span>
      <a href="default.html">
        <img  id="uk" src="images/uk.png">
    </span></a>
    <span><a href="default_ita.html">
      <img  id="uk" src="images/italy.png">
    </span></a>
  </div>
</div>

header::before在这个例子中，我试图将伪元素拉伸到整个页面宽度。

100vw 为伪元素提供屏幕的宽度，到目前为止还不错。

但是左侧位置left: -100%;将伪元素向左推得太远了。是否可以计算出正确的左侧位置？

.wrapper {
  width: 70%;
  max-width: 800px;
  margin: 0 auto;
}

header {
  background: pink;
  position: relative;
  z-index: 0;
}

header::before {
  background: lightblue;
  position: absolute;
  z-index: -1;
  content: "";
  height: 100%;
  width: 100vw;
  /* full page width */
  left: -100%;
  /* left positioning */
}

main {
  background: wheat;
}

<div class="wrapper">
  <header>Header</header>
  <main>Main content</main>
</div>

Codepen 链接：https ://codepen.io/anon/pen/yZGzPO

所需的结果应如下所示：