###### tags: `CSS` `網頁切版直播班 - 2022 夏季班`
{%hackmd BJrTq20hE %}
# 第六周切版遇到的問題

## position sticky區域的全板覆蓋
如下圖，需要做到如下"其他人也看了這些課程"把position sticky蓋掉
1.使用position:relative再加上z-index:1就可以蓋掉position sticky的區域了

## 因為"其他人也看了這些課程原本"在container內所以不會有全版效果
所以用了偽元素分別補滿左邊與右邊的container到螢幕邊的背景色。
用tailwind寫如下

   <div class="bg-black relative z-20 col-span-12 
    before:absolute before:bg-black before:top-0 before:right-0 before:h-full before:w-[100vw] before:z-10
    after:absolute after:bg-black after:top-0 after:left-0 after:h-full after:w-[100vw] after:z-10 ">
       ...
</div>

## 使用之後會發現多了x軸的scroll
原是偽元素的寬多了(螢幕-container)，怎麼處理呢?
1.使用在父層overflow:hidden，但結果會使子層的position:sitcky"無效"
這個時候父層可以改用overflow-x:clip
用tailwind寫如下

<div class="bg-secondary-dark overflow-x-clip">
    ...
</div>

## 不過overflow-x:clop不支援Safari 16.0之前的版本

[caniuse.com](https://caniuse.com/?search=overflow-x%3Aclip)

實地連結
---
[遇到問題的地方coluse.html-已解決 GitHup](https://github.com/a121515222/week-6/blob/main/app/course.html)

[遇到問題的地方colse.html-已解決 GitPage](https://a121515222.github.io/week-6/course.html)