文本重叠容器和垂直移动视图中的第二页答案

【问题标题】：Text overlapping container and onto 2nd page in vertical mobile view文本重叠容器和垂直移动视图中的第二页
【发布时间】：2016-02-27 03:51:40
【问题描述】：

所以在“关于”页面上，我将所有内容都放在一个容器中。现在在大屏幕上，当我单击“单击以向右滑动面板”区域时，一个文本块向右滑动。当我将大小调整到小于 720 像素时，面板消失了，文本块也应该消失了，但是它显示在右侧的较小屏幕中并与其他页面重叠。

a) 我如何包含此文本块 b）我想我知道如何弄清楚如何移动图像下方的文本，所以当在移动设备中查看时，图片是屏幕的中心（我已经实现了）。然后文本块出现在容器区域中的图像下方，没有添加任何动画（只是显示为静态）。几个小时以来一直在尝试解决这个问题，但我觉得这是我的定位？我在我的代码中做错了什么？谢谢！

freecodecamp personal portfolio project

.secondpage{
  background-color:pink;
  height:57em;
}

/*.title{
  padding-top:.5em;
}*/

.picture{        
  padding-top:10em;
  padding-bottom:0em;
}

.img-circle{
  width:20em;
  height:20em;
  border:.2em solid;
  border-radius:50%;
}


/*start of toggle panel design*/
/***********************************************************************************************************************/
@media screen and (max-width: 720px) {
  .img-circle{
  margin-left:auto;
  margin-right:auto;
    margin-top:-8em;  
  }
 
 
  }


#flip{
position:absolute;
  transform:rotate(-90deg);
  margin-left:6em;
  margin-top:-6.1em;
  border:.1em solid;
}

.title{
  margin-left:22em; 
  margin-top:-24em;
  
}


.contthird1{
  background-color:red;
  height:100%;
}
.title p{
 border:.1em solid;
    color: rgba(0,0,0,0.9);
  width:100%;
}
@media screen and (max-width: 720px){
  .title>p{
    border-style:none;
  }
}

.title a:hover{ 
  text-decoration:none;
  color:blue;
  font-weight:bold;
}/*for self taught link*/

【问题讨论】：

您好，很难理解您希望我们提供什么帮助。请澄清。你想对文本做什么？隐藏它或推到下面？
我想将它推到图片下方，但现在当我尝试时，文本会超出容器并重叠到“作品集”页面上。无法解决此问题。 @Av Avt
codepen.io/anon/pen/VawmZr这是你想要的吗？
@AvAvt omg 是的，我看到你添加了“.title {margin: 0; }”。你能帮我理解一下到底发生了什么，这么简单的事情就解决了吗？
好的，那我来回答一下。

标签： css css-position containers

【解决方案1】：

解决方法就是添加

@media screen and (max-width: 720px) {
  .title {
    margin: 0;
  }
}

http://codepen.io/anon/pen/VawmZr

这是因为在宽版本中，标题与右上角对齐不是浮动的，而是负边距：

.title{
  margin-left:22em; 
  margin-top:-24em;

}

当这个负边距消失时，它会回到它应该作为块元素的位置。

【讨论】：