首页 > 社区问答列表 >对元素应用position: fixed会破坏由display: flex控制的内容的对齐方式。

对元素应用position: fixed会破坏由display: flex控制的内容的对齐方式。

P粉131455722 2023-08-02 17:11:54

[CSS3讨论组] 举报回复话题 ↕

我需要。word和。line元素被固定到视窗的顶部时，页面被滚动-在他们最初的位置，即行是低于单词。

我设法修复了。word与position: sticky，但面临两个问题:

当我将sticky应用于。line时，它会“跳到”单词上方，我不知道如何将其固定在视口的顶部，但强制它保持在。word元素下方
粘性最初不是正确的值-当你开始滚动时，它会“摇动”文本。正确的值是固定的-它工作得很好，我宁愿宁愿使用它!然而，它打破了。warning类(红色字体)的位置:它应该在。transcription文本的对面(水平)，但是固定值将这两个类的文本折叠在一起。

这里也是JS Bin与这种“情况”。

.word {                                  
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: white;
}


.word {
        padding: 1vw 3vw 2% 3vw;
      }

      .word-details {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
      }

      .transcription {
        font-weight: normal;
      }

      .warning {
        color: red;
        margin-left: auto;
      }

      .line {
        border-top: 2px solid #fdb239;
      }

      .meaning {
        list-style-type: none;
        counter-reset: item;
        hyphens: auto;
        font-size: calc(0.7em + 1.5vw);
      }

      .meaning > li {
        position: relative;
      }

      .meaning > li::before {
        content: counter(item);
        counter-increment: item;
        position: absolute;
        top: 0;
        text-align: center;
        margin-left: calc(-0.7em - 2.5vw);          
      }

      .meaning-word {
        margin-top: 50px;
      }

      .sentences {
        list-style-type: none;
        padding-left: 0;
        font-size: calc(0.7em + 1.5vw);
        margin-top: 30px;                   
      }

      .sentences > li.sentence-ru {
        margin-top: 15px;                   
      }

<!DOCTYPE html>
<html>
<body>
  
  <div class="word">
    <span>Word</span>
       <div class="word-details">
         <div class="transcription">/ transcription /</div>
         <div class="warning">COMMENT</div>
       </div>
  </div>
      <hr class="line">
        
  
  <ol class="meaning">
    <li class="meaning-word">Meaning1</li>
      <ul class="sentences">
        <li class="sentence-en">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
        <li class="sentence-ru">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</li>
      </ul>
    <li class="meaning-word">Meaning2</li>
      <ul class="sentences">
        <li class="sentence-en">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
      </ul>
  </ol>

</body>
</html>

P粉131455722

全部回复（1）
我来回复

P粉539055526 采纳为最佳 2023-08-03 11:07:47 1楼

在滚动页面时，在页面顶部保持几个元素分开是很困难的，所以我建议一个更简单的解决方案。你的黏贴条的“跳跃”是因为黏贴条的初始位置与滚动时它在页面顶部的位置不同

为了避免你的hr线消失，而滚动，我会把所有的组件，你想保持在页面的顶部在一个容器，例如一个div，然后使该容器粘。

第二个问题是，因为默认的body margin (10px)设置你的sticky bar在开始的时候有点低。然后我们滚动页面-主体边距已经被滚动过了，你设置粘条绝对在顶部(top: 0;)，所以它必须跳到顶部这额外的10px。快速修复是将body顶部边距设置为0，然后您的粘贴条在页面顶部的位置始终相同。

下面是更新后的代码片段。

body {
    margin-top: 0;
}

.sticky-container {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: white;
}

.word {
    padding: 1vw 3vw 2% 3vw;
}

.word-details {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.transcription {
    font-weight: normal;
}

.warning {
    color: red;
    margin-left: auto;
}

.line {
    border-top: 2px solid #fdb239;
}

.meaning {
    list-style-type: none;
    counter-reset: item;
    hyphens: auto;
    font-size: calc(0.7em + 1.5vw);
}

.meaning > li {
    position: relative;
}

.meaning > li::before {
    content: counter(item);
    counter-increment: item;
    position: absolute;
    top: 0;
    text-align: center;
    margin-left: calc(-0.7em - 2.5vw);          
}

.meaning-word {
    margin-top: 50px;
}

.sentences {
    list-style-type: none;
    padding-left: 0;
    font-size: calc(0.7em + 1.5vw);
    margin-top: 30px;                   
}

.sentences > li.sentence-ru {
    margin-top: 15px;                   
}

<html>
    <body>

    <div class="sticky-container">
        <div class="word">
            <span>Word</span>
            <div class="word-details">
                <div class="transcription">/ transcription /</div>
                <div class="warning">COMMENT</div>
            </div>
        </div>
        <hr class="line">
    </div>

      <ol class="meaning">
            <li class="meaning-word">Meaning1</li>
            <ul class="sentences">
                <li class="sentence-en">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
                <li class="sentence-ru">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</li>
            </ul>
        <li class="meaning-word">Meaning2</li>
            <ul class="sentences">
                <li class="sentence-en">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
            </ul>
      </ol>

    </body>
</html>

赞 +0 添加回复

P粉131455722

进入小组列表 + 发布话题

热门话题

文章推荐

 对元素应用position: fixed会破坏由display: flex控制的内容的对齐方式。

对元素应用position: fixed会破坏由display: flex控制的内容的对齐方式。