时间戳

首页 > 解决方案 > 为什么这个 CSS 位置规则对 P 元素没有任何影响

css - 为什么这个 CSS 位置规则对 P 元素没有任何影响

问题描述

我正在尝试自学 CSS 布局，但我不明白为什么这个 CSS 规则不会影响段落元素的位置。

HTML

     <body>


    <p>Liza likes to call me first thing in the morning at 6am, it is    very funny.</p>

   <p class"relative">I drove a Lithuanian girl home this week and she told me about the clubs that she likes to go to like Raduga and Roka club.</p>

    <p>I was sleeping all day yesterday and all night last night, I just woke up and I want to get a coffee now</p>

     </body>

css

       p  {  background-color: pink;
             border-style: solid;
             border-radius: 5px;
             padding: 10px;
             border-color:red;
             margin:20px;}

        .relative {  position: relative;
                     left: 20px;
                     top: 20px;}

标签： css

解决方案

如您所见，您缺少的class="relative"应该是介于两者之间的。还有一个建议。请不要在您的班级中使用任何职位名称。 检查如何命名类 

p {
  background-color: pink;
  border-style: solid;
  border-radius: 5px;
  padding: 10px;
  border-color: red;
  margin: 20px;
}

p.relative {
  position: relative;
  left: 20px;
  top: 20px;
}
<body>


  <p>Liza likes to call me first thing in the morning at 6am, it is very funny.</p>

  <p class="relative">I drove a Lithuanian girl home this week and she told me about the clubs that she likes to go to like Raduga and Roka club.</p>

  <p>I was sleeping all day yesterday and all night last night, I just woke up and I want to get a coffee now</p>

</body>

推荐阅读