微信小程序的样式格式

问题遇到的现象和发生背景

实在找不到解决办法了，代码写的也乱糟糟的，希望大家能帮我把
这个样式

img


改为

img

本来尝试了articl-block：nth-of-type（1）{
merggin-top：50rpx}
发现这个筛选那一行也跟着动了

问题相关代码，请勿粘贴截图
WXML
 
<view class="sreenBigBox">
  <view class="sreenBox">
    <view class="sreenItems">
      <view class='sreen ' bindtap="sreenShow">筛选<image class='head {{sreenShow&&"rotating"}}' src="/images/tips/79.png"/>view>
      <view class="sort" bindtap="showModal">新手教学<image class='head {{sortShow&&"rotating"}}' src="/images/tips/new.png"/>view>
    view>
  view>
  
    
<view class="sreenConainer" style="height:{{sreenShow?2000:0}}rpx">
  <view class="chooseBox">
    <scroll-view  class="typeBox">
      <view class="typeItems" wx:for="{{typeItems}}" wx:key="*this"
        bindtap="chooseType" data-index="{{index}}">
        <text class="typeItem {{index===typeCurrentIndex?'typeItemAdd':''}}">{{item}}text>
      view>
    scroll-view>
    <scroll-view class="chooseItems" scroll-y> 
             <block wx:for="{{chooseItems[typeCurrentIndex]}}" wx:key="key">
               <view class='ItemLabel {{item.selected===true?"choosing":""}}' data-value="{{item.name}}" bindtap="chooseItem" checked="{{item.selected}}" data-index="{{index}}">
                {{item.name}}                                  
               view>
             block>
    scroll-view>
  view>
   <view class="buttonConainer">
     <button class="cancel" size="mini" bindtap="cancel">取  消button>
     <button class="clear" size="mini" bindtap="clear">清  除button>
     <button class="confirm"  size="mini" bindtap="confirm">确  认button>
   view>
   <view style="width: 100%;"/>
   <view class='mask' v-if="{{flag}}" bindtap="mask">view>
view>
<view class="sreenConainer" style="height:{{sortShow?1000:0}}rpx">  
view>
view>

<view >
<view class="article-block" wx:for="{{ ArticleLists }}" wx:key="index" bindtap="copybv" data-bv="{{ item.bv}}">
    <view class="article-text">
      <view class="article-title">{{ item.title }}view>
  view>
view>
view>


WXSS
/* 筛选 */
.sreenBigBox{
  position: fixed;
  z-index: 999;
}
.sreenBox{
  display: flex;
  flex-direction:unset;
  background-color: white;
  width: 750rpx;
  height: 70rpx;
  z-index: 999999999999;
  border-bottom-width:2rpx;
  border-bottom-style:solid;
  border-bottom-color:#f1f2f3
}
.sreenItems{
  display: flex;
  flex-direction: unset;
  align-items: center;
  flex:2;
}
.sort,
.sreen{
  position: relative;
  display: flex;
  align-items: center;
  background-color: #f1f1f1;
  color: #666666;
  font-size: 25rpx;
  font-weight: 500;
  border-radius: 20rpx;
  margin-left: 6%;
  padding:0.7em;
  height: 70%;
  letter-spacing: 0.3em;
}
.head{
  height: 25rpx;
  width: 25rpx;
}
.rotating{
  transform: rotate(90deg);
  transition: all 600ms;
}
.specailItems{
  display: flex;
  flex-direction: unset;
  flex:1;
}


 
/* 下拉框 */
.sreenConainer{
  z-index: 999;
  position: fixed;
  width: 100%;
  overflow: hidden;
  transition: height 200ms;
  display: flex;
  flex-direction: column;
}
.chooseBox{
  display: flex;
  flex-direction:unset;
  border-bottom-width:2rpx;
  border-bottom-style:solid;
  border-bottom-color:#f1f2f3;
  background-color: white;
}
.typeBox{
  display: flex;
  flex-direction:column;
  flex:0.8;
  margin-bottom: 25rpx;
  border-right-width:2rpx;
  border-right-style:solid;
  border-right-color:#f1f2f3
}
.typeItems{
  margin-top: 25rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.typeItem{
  display: flex;
  color: #696969;
  font-weight: 500;
  height: 30rpx;
  font-size: 25rpx;
  padding: 0rpx 10rpx 0rpx 10rpx;
  letter-spacing: 0.3em;
}
.typeItemAdd{
  border-left: 7rpx solid #96bff0;
}
.chooseItems{
  flex:3;
  display: flex;
  margin-top: 20rpx;
}
.ItemLabel{
  display: inline-block;
  width: 100rpx;
  font-size: 25rpx;
  text-align: center;
  line-height: 60rpx;
  font-weight: 400;
  color:#696969;
}
.choosing{
  color: #96bff0;
  font-weight: 600;
}
.buttonConainer{
  background-color: white;
  height: 90rpx;
  display: flex;
}
.cancel{
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 50rpx;
  width: 130rpx !important;
  color: #6a6a6a;
  background-color: #f1f1f1;
  font-size: 28rpx !important;
  margin-top: 15rpx;
  margin-bottom: 15rpx;
  margin-left: 100rpx;
  margin-right: 30rpx;
}
.clear{
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 50rpx;
  width: 130rpx !important;
  color: #6a6a6a;
  background-color: #f1f1f1;
  font-size: 28rpx !important;
  margin-top: 15rpx;
  margin-bottom: 15rpx;
  margin-left: 40rpx;
  margin-right: 30rpx;
}
.confirm{
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 50rpx;
  width: 200rpx !important;
  color: #ffffff;
  background-color: #6b9edd;
  font-size: 28rpx !important;
  margin-top: 15rpx;
  margin-bottom: 15rpx;
  margin-left: 35rpx;
  margin-right: 30rpx;
}
/* 遮罩层 */
.mask{
  margin-top: 560rpx;
  width:100%;
  height:100%;
  position:absolute;
  background-color:#999;
  z-index:9999;
  top:0;
  left:0;
  opacity:0.5;
}
.home-block {
  margin-bottom: 200rpx;
}

.article-block {
  display: flex;
  height: 50rpx;
  width: 350rpx;
  margin: 0rpx 50rpx 0 50rpx;
  padding: 20rpx 0 20rpx 0;
  border-top: 1rpx solid rgba(222, 222, 222, 0.5);
}


.article-text {
  position:absolute;    /* 父元素绝对定位 */
  flex: 1;
  height: 22rpx;
  width: 1000rpx;
}

.article-title {
  position: absolute;    /* 垂直居上 */
  top: 10rpx;    /* 垂直居上 */
  font-size: 28rpx;
  padding-bottom: 10rpx;
  font-weight: bold;
}
.article-content{
  position: absolute;    /* 垂直居上 */
  top: 60rpx;    /* 垂直居上 */
  font-size: 28rpx;
  padding-bottom: 10rpx;
}

.article-time {
  position: absolute;    /* 垂直居下 */
  bottom: 0rpx;    /* 垂直居下 */
  font-size: 22rpx;
  color: darkgrey;
  padding-bottom: 10rpx;
}

.article-image {
  position: absolute;
  right: 30rpx;
  width: 300rpx;
  height: 200rpx;
}
我的解答思路和尝试过的方法

本来尝试了articl-block：nth-of-type（1）{
merggin-top：50rpx}但是失败了

position: fixed;会脱离文档流, 问题应该出在这里 。

margin-top