CSS:添加位置固定使标题向右移动?

CSS:添加位置固定使标题向右移动?,css,Css,在页眉css中,为什么当我添加position:fixed时,专题讨论会文本会一直向左移动?当您设置position fixed时,页眉会占用内容的宽度,因此请指定宽度 试试这个款式 header{ position:fixed; margin:0; padding:0; width:100%; left:0; text-align:center; } 我不知道你想做什么 我已经玩过一点了。。。请检查一下我对你工作的看法 HTML 我还没决定要什么。我只是不明白为什么在


在页眉css中,为什么当我添加position:fixed时,专题讨论会文本会一直向左移动?

当您设置position fixed时,页眉会占用内容的宽度,因此请指定宽度

试试这个款式

header{
  position:fixed;
  margin:0;
  padding:0;
  width:100%;
  left:0;
  text-align:center;
}

我不知道你想做什么

我已经玩过一点了。。。请检查一下我对你工作的看法

HTML


我还没决定要什么。我只是不明白为什么在我的原始代码中“研讨会”稍微偏左,当我添加position:fixed to header时,它会转向中间left@user3469931检查这把小提琴,我添加了我上面提到的风格,看起来不错。你能检查一下这把小提琴,让我知道它是否仍然对你不起作用。是的,你的代码工作正常,但这不是我的问题。当我添加位置固定时,我的代码也可以正常工作。我特别感到困惑的是,为什么在位置固定和不固定的情况下,收割台的位置会发生变化。我想运行一个javascript,在一定数量的滚动之后将位置固定添加到标题,为了一致性,它应该看起来与vs相同,为什么一个稍微向左,而另一个完全向左,而唯一的区别是位置:固定?首先,你要给出%的边距和边距。在两个选项卡中打开上述两个代码笔,使边距和填充为0。然后您可以看到静态标题宽度是其父div内容的宽度,而固定标题宽度只是标题内容的宽度。因此,当应用边距和填充百分比时,这些值将基于相应内容的宽度和高度进行计算。现在尝试在两个codpens的标题中添加1%的填充,您可以通过内容随1%移动的程度看到内容的位移。希望这对你有帮助。我还没决定要什么。我只是不明白为什么在我的原始代码中“研讨会”稍微偏左,当我添加位置:fixed to header时,它会转向左边,您希望它在哪里?它处于一个奇怪的位置,因为您的边距和填充过多。
<header><div class="logo">symposiums</div></header>
<div class="content">
  <p>
1.a convivial meeting, usually following a dinner, for drinking and intellectual conversation.<br>
2.( initial capital letter, italics ) a philosophical dialogue (4th century b.c.) by Plato, dealing with ideal love and the vision of absolute beauty.</p>
<p>i realize that i have to live, to experience life and to do new things everyday. That is the antidote for boredom, procrastination and sulking. Don't let things be a routine, or else time will just fly by. Twas a good night.</p><br>
<p>And we gotta be a superhero, a renaissance man, against this all. everyones need an outlet for expression,  a skill in the arts, music, dance, writing, etc.</p>
and i need to put my feet on the ground, remember i am not special, pay my dues, and still put my mind in the skies.
<br><br><br><br><p><center>The mind is it's own place, and in itself can make a heaven of hell or a hell of heaven. John Milton.</p>

<h2>I WONDER</h2></center>

  <p>I'm too emasculated for this shit
  <br>jobs, aren't they buying part of your life? and i want family and freedom<br>
  <font color="red"> but of course you won't feel anything, not accomplishment nor desire, if you don't put seriousness and passion into</font></p>

  <p>Twenty years from now you will be more disappointed by the things that you didn't do than by the ones you did do. So throw off the bowlines.  Sail away from the safe harbor.  Catch the trade winds in your sails.  Explore.  Dream.  Discover.</p>

  <p>the thing is it doesn't matter how much you read. there is a certain extent, you have to do, to experience, and nothing can replace that. what do i do?</p>

</div>
header
    {
      margin: 0;
  position:fixed;
  width: 100%;
  top: 0;

    background: #BDBDBD;
    font-size: 250%; 
    line-height: 200%; 
    opacity: 0.5;
height: 72px;
    }

header .logo {
  width: 35%;
  left: 22%;
  margin: 0 auto;
  position: absolute;
    font-family: georgia;
    font-variant: small-caps;
}

header .logo:first-letter
    {
    text-transform: uppercase;
    color: red;
    font-family: times;
    }

body 

    {
    cursor: crosshair; 
    font-family: helvetica; 
    font-size: 90%; 
    opacity: .7;
    }


h2 

    {
    font-family: arial, helvetica; 
    font-weight: bold; 
    font-size: 550%; 
    text-shadow: 0 1px 1px grey;
    }



.content

    {
margin: 80px auto;
    text-align: left;
    width: 35%;
    border: 2px dotted grey;
    padding: 0 4% 15% 4%;
    }