相关疑难解决方法(0)

我无法定位,最大宽度和'右:0px'协调工作!我正在创建一个固定在我的网站右上角的div.页面内容的最大宽度为1000px,但标签只遵循我的'right:0px'规则并向右粘,一旦达到最大宽度就不遵守.还应该注意的是,默认情况下,div位于左上角并且服从最大宽度(如果我输入'left:0px;'但是,它不遵守规则并且它坚持左边).

CSS:

#content {
margin: 0 auto;
max-width: 1000px; }

#div {
width: 150px;
position: fixed;
right: 0px; } 

以下是我已经尝试过的一些替代方案:

• 宽度:100%(文字对齐:右)<---不太正确,我不喜欢100%宽度而不是150px
• 添加代码以在html(而不是CSS)中"手动"定位div
• 我发现浮动和文本对齐不会影响固定定位

非常感谢帮助!谢谢.

我遇到了固定定位,css转换容器和Safari的麻烦.当我在模态中单击项目时,我正在尝试显示下拉列表.模态有一个css transform.为了确保下拉列表始终显示在模态上,我将其定位为固定(我使用JS 计算left和top值).

它在Chrome,Firefox和Opera中的效果与预期相同,但Safari显示出一种奇怪的行为.根据W3C:

对于变换,除了none之外的任何计算值都会导致创建堆叠上下文和包含块.该对象充当固定定位后代的包含块.

因此,CSS转换容器中的固定元素应相对于此容器而不是视口定位.但似乎Safari并不像这样.看这个例子:

$(document).ready(function() {
  $(".show-liste").click(function() {
    $(".liste").show();
  });
});

.modale {
  height: 50px;
  overflow-y: scroll;
  transform: translate(100px);
}

ul {
  position: fixed;
  left: 0px;
  top: 0px;
}



/* --- Purely style related stuff ---- */

body {
  font-size: 80%;
}
.modale {
  position: absolute;
  top: 50px;
  padding: 60px;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 2px #ddd;
}
button {
  width: 200px;
}
ul {
  list-style-type: none; …

我在容器中有一个固定的块元素。滚动时，固定定位的元素超出了容器。我知道固定元素将根据窗口 vw 定位。但是有什么方法可以确保固定定位的元素只会滚动到容器位置。固定位置元素不应超出容器

问题如下所示。

https://codepen.io/anon/pen/dKLByX

我尝试使用以下方法解决问题：

if($(window).scrollTop()>1900){
    $('.fixed-ct').css({'bottom':'200px','top':'auto'});
}else if($(document).scrollTop() <=100) {
    $('.fixed-ct').css({'top':'10px','bottom':'auto'});
}else {
    $('.fixed-ct').css({'top':'0px','bottom':'auto'});
}

但有时固定容器在末尾，因为底部 200px 它应该在顶部使用 top:0px 滚动并且它应该在容器本身内部。

我试图将一个元素固定在一个容器中,但固定元素似乎是根据屏幕而不是父元素定位自己.

我的代码:

<div class="relative">
  <div class="absolute">
    <div class="fixed"></div>
  </div>
</div>

Css:

.relative{
  position: relative;
  height:800px;
  width: 400px;
  background: #000;
}

.absolute{
  height:60px;
  width: 60px;
  position: absolute;
  top:0;
  right:0;
  background: #ccc;
  -webkit-transform: translateZ(0); 
}

.fixed{
  height:20px;
  width: 20px;
  background: red;
  position: fixed;
  top:0;
  right:0;
}

我想把红色框固定在灰色框内.但现在当我滚动框滚动并且仍未固定.

现场观看:http://codepen.io/undefinedtoken/pen/abhgc

我很抱歉我的问题可能是重复到此:
在div内部的Bootstrap固定导航栏 或者这个:
Twitter Bootstrap:如何使顶部固定导航栏留在容器中而不是拉伸？
或许多相似,但三年过去了,Bootstrap几乎将它的版本从第2版更新为第4版,但问题仍然存在.
所以我正在寻找一些优雅而简单的方法来使固定导航栏保持在父母div.container中.
这是我从官方文档中复制和更改的代码:

<div class="container">
    <nav class="navbar navbar-fixed-top navbar-light bg-faded">
        <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" 
            data-target="#navbarResponsive" aria-controls="navbarResponsive" 
            aria-expanded="false" aria-label="Toggle navigation">
        </button>
        <div class="collapse navbar-toggleable-md" id="navbarResponsive">
            <a class="navbar-brand" href="#">
                <img src="" width="30" height="30" class="d-inline-block align-top" alt="">Navbar
            </a>
            <ul class="nav navbar-nav float-md-right">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home 
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
    </nav>
</div> 

我试图纵向和横向集中,但没有成功:

https://jsfiddle.net/szg7hhph/1/embedded/result/

HTML:

<div id="new__event">
  <div class="target">
    <h2>Free Pass</h2>
  </div>
</div>


body {
  margin: 0;
}

#new__event {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms;
}
#new__event {
  pointer-events: all;
  opacity: 1;
}
#new__event .target {
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding: 48px;
  width: 50%;
  margin: 0 auto;
  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
  background: white;
  color: #f98835;
  margin-top: 1.5rem;
}

我已经尝试了margin 0 auto,text-align,vertical-align,但是这个框仍然存在于角落里.

我有一个侧边栏，其位置设置为相对：

.home-left-sidebar,
.home-right-sidebar {
  flex: 1;
  color: rgb(66, 66, 66);
  font-size: 17px;
  position: relative !important;
}

它有一个设置为固定的子项：

.left-sidebar {
  position: fixed;
  right: 0;
}

但由于某种原因，孩子并没有粘在父 div 上，而是粘在了 body 上。

<div className='home-left-sidebar '>
  <LeftSidebar />
</div>

<div className='left-sidebar'>
      <div className='left-sidebar-items'>
        <ul>
          <NavLink to='/home/popular'>
            <li>Home</li>
          </NavLink>
          <NavLink to='/home/new'>
            <li>Newest</li>
          </NavLink>
          <NavLink to='/home/likes'>
            <li>My Likes</li>
          </NavLink>
          <NavLink to='/home/user/posts'>
            <li>My Posts</li>
          </NavLink>
        </ul>
      </div>
    </div>

我不知道我在这里做错了什么。