标签: css-position

我想做类似的事情： http: //bit.ly/RLpHme

我正在为一位房地产经纪人开发一个网站，她想从她的合作伙伴网站加载列表，但顶部有一个固定的标题，其中包含她的信息。

我将如何实现这一目标？

谢谢您的帮助！

我需要一个页面，中间有一个图像，里面有一个按钮。我无法实现的是在调整浏览器窗口大小时强制按钮保持在相同位置。这是页面： http://jsfiddle.net/afg5wrLz/

HTML 代码：

<div id="MyImage">
    <img id="theImage" src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg">
    <button id="myButton">Start Here</button>
</div>

CSS：

#MyImage{
    position: relative;
}

#theImage{
   position: relative;
   margin-left: auto;
   margin-right: auto;
   margin-top: 20px;
   display: block;    
   width: auto;
   height: auto;
   max-width: 400px;
}
#myButton{
   position: absolute;
   left: 0px;
   top: 0px;
}

现在，如果您重新调整窗口大小，您就会看到问题；按钮的左侧坐标与窗口相关，而不是与图像相关，因此当您重新调整窗口大小时，按钮会移动，而我希望它保持在图像中的相同位置。要更好地了解我需要什么，请前往http://www.whatsapp.com/并查看“下载 WhatsApp”按钮的行为或文本“简单。个人...”（如果您重新调整窗口大小）将看到它们相对于背景图像保持在相同的位置，随着宽度的变化，背景图像保持在屏幕的中心。我想知道我需要对代码进行哪些更改才能实现该结果

我想知道为什么将 margin-left ib 设置div为id="pink"自动将 div 移动到右侧的原因。请看图片图片：

超文本标记语言

 <div id="aqua">aqua</div> 
 <div id="yellow">yellow</div> 
 <div id="pink">pink</div>

CSS

#aqua, #yellow, #pink { border:1px solid blue;}

#pink { width:150px;
   margin-left:auto;
 }

请检查这个小提琴。

我不明白我的代码有什么问题。我的意思是，section 元素有高度，我的 DIV 元素的显示值肯定是块，我真的不知道它是如何工作的以及如何将这两个不同位置的元素组合起来。请给我您今天学习新东西的解决方案和建议。

div {
  position: relative;
  margin: 0 30%;
}

div section {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 100px;
  background-color: yellow;
}

hr {
  height: 2px;
  background-color: blue;
}

<div>
  <section></section>
</div>

<hr>

问题

我制作了一个固定模式来显示页面的主要内容。模式的内容的高度可能最终大于视口，因此需要滚动，但它不起作用。

模态的内容

模态内有

1. 带有灰色背景的空覆盖/背景div，占据模式的整个宽度和高度。
2. 内容本身的高度最终可能大于视口。

JS小提琴

这是一个 JS Fiddle 演示了这个问题。我添加了边框颜色以更好地帮助区分各个元素。

https://jsfiddle.net/mLjs49ms/7/

我有其他符号font-family，需要调整其大小。不幸的font-size:200%是增加整行的行高；

如何font-size在不增加的情况下增加一个字符line-height？

我知道如何“切断”角色，position:absolute但这也会水平移动文本。当我想要的是某种线条时line-height: inherit（这不起作用）。

.increased {
  font-size:200%
}

<p>normal</p>
<div style="background-color:yellow">.text text text text text text text text text text  text text text text text text text text text text  text text text text text  text text text text text  </div>
<p>increased (problematic)</p>
<div style="background-color:yellow"> <span class="increased">.</span>text text text text text text text text text text  text text text text text text text text text text …

我的表格标题中有两行，我希望它固定在滚动上。我怎样才能做到这一点？我尝试将th元素的位置设置为sticky，但第二行与滚动时的第一行重叠（请参阅代码片段）。

我见过很多基于 js 的解决方案，但我对它们根本不感兴趣。当然，仅使用 CSS 就可以实现！

我也不希望有一个必须对标题行的高度进行硬编码的解决方案。

.wrapper {
  height: 200px;
  width: 150px;
  background: red;
  overflow: auto;
}

table {
  width: 100%;
  border-spacing: 0;
}

th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: blue;
  text-align: left;
}

<div class="wrapper">
  <table>
    <thead>
      <tr>
        <th>a</th>
        <th>b</th>
      </tr>
      <tr>
        <th>c</th>
        <th>d</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>e</td>
        <td>f</td>
      </tr>
      <tr>
        <td>g</td>
        <td>h</td>
      </tr>
      <tr>
        <td>i</td>
        <td>j</td>
      </tr>
      <tr>
        <td>k</td>
        <td>l</td>
      </tr>
      <tr>
        <td>m</td>
        <td>n</td>
      </tr>
      <tr>
        <td>o</td>
        <td>p</td>
      </tr> …

我有一个菜单，当屏幕较小时（比如在 SM 之前），我希望将其定位在屏幕左侧，而当屏幕较大时，将其定位在屏幕右侧。

<MenuItems
  class="
    absolute left-2 top-24 w-full mt-8
    sm:right-2 sm:top-0 sm:w-max
  "
>

单独应用时，设置right-*可按预期工作，但以断点为前缀时sm left-*优先。

这是一种在大屏幕上取消左键的方法吗？喜欢sm:left-none

如何防止粘性元素进入标题后面？

当前的代码片段在父级上使用填充顶部，我也尝试在额外的子级上使用 margin-top 或透明 50px 边框，但它似乎不起作用。

我知道在这种情况下我可以轻松地top: 50px; 在粘性标签上使用，但我想将这部分集成到 React 组件中，并且使用特定的尺寸使得组合不同的组件变得更加困难，因为它们都必须共享顶部尺寸。

如何使标题/填充成为“实心”并使粘性无法通过？

body{
  background: rgb(200,200,200);
  padding:0px;
  margin:0px;
}
header{
  height: 50px;
  font-size: 2em;
  background: aqua;
  opacity: 0.6;
  text-align:center; 
  position: fixed; 
  width: 100%;
}
.content-wrapper{
  padding-top: 50px; /* keeps the header space */
  
  height: 800px; /*for demo*/
}
.sticky{
  position: sticky;
  top:0;
}

<header>header</header>
<div class="content-wrapper">
  <div class="sticky">
  Hello, I am a sticky element
  <div>
<div>

编辑:
如果相反的日期,我需要描述？(我应该使用段落,并且验证段落不能成为锚点,因为段落是块级别)
编辑结束

我相信通过阅读标题你不明白我想要什么.
我不确定如何写一个句子来概括我的问题.

所以,这是我的问题:
我在其中有3个不同的东西锚点>图标,标题和日期.每个都在不同的范围内.
我不知道它是否是正确的方法.

<ul id="m-items">
    <li>
        <a href="/post.php?name=ahf-_" class="m-item-header clear">
            <span class="m-item-icon"></span>
            <span class="m-item-title">ah%f#-$%^&amp;()_!</span>
            <span class="m-item-date">17 Feb 2013</span>
        </a>
    </li>
    <li>
        <a href="/post.php?name=d-3" class="m-item-header clear">
            <span class="m-item-icon"></span>
            <span class="m-item-title">d-3</span>
            <span class="m-item-date">16 Feb 2013</span>
        </a>
    </li>
</ul>

上面代码的完整jsfiddle

我有另一种方法来做,我认为这是正确的方法,但我不确定...
我的第二种方法是使用div有两个元素,锚和另一个包含文本的div.
每个人都处于绝对的位置.

<ul id="m-items">
    <li>
        <div class="m-item-header">
            <a href="/post.php?name=ahf-_"></a>
            <div class="m-item-header-content clear">
                <div class="m-item-icon"></div>
                <div class="m-item-title">ah%f#-$%^&amp;()_!</div>
                <div class="m-item-date">17 Feb 2013</div>
            </div>
        </div>
    </li>
    <li>
        <div class="m-item-header">
            <a href="/post.php?name=d-3"></a>
            <div class="m-item-header-content clear">
                <div class="m-item-icon"></div>
                <span class="m-item-title">d-3</span>
                <span class="m-item-date">16 …