# BubbleのRepeating groupの中にfloating groupを配置したいです。

**URL:** <https://www.nocode-faq.com/t/topic/2894>\
**Category:** bubble\
**Created:** [2022 年 5 月 24 日午前 6:44 UTC](https://www.nocode-faq.com/t/topic/2894 "2022-05-24T06:44:02Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Taiyo](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/taiyo/32/4508_2.png) [@Taiyo](https://www.nocode-faq.com/u/Taiyo)\
**Post date:** [2022 年 5 月 24 日午前 6:44 UTC](https://www.nocode-faq.com/t/topic/2894/1 "2022-05-24T06:44:02Z")

</div>

###・前提条件  
Repeating groupの中にfloating groupを配置したいです。

### ・発生している問題

テスト環境で作成する分には実装することができるのですが、実装した分、issueが増えてしまうのでデプロイする際にはrepeating groupの中にfloating を置くことができません。

### ・実装したい機能

floating groupでなくても親要素のRepeating groupエレメントに対して浮いている挙動ができれば大丈夫なのですが、何か大替案はありますでしょうか？

### 試したこと

浮かせたいエレメントに対してネガティブエレメントを指定しました。

---

<div class="post-metadata">

**Author:** ![john03tgck01a](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/john03tgck01a/32/4558_2.png) [@john03tgck01a](https://www.nocode-faq.com/u/john03tgck01a)\
**Post date:** [2022 年 5 月 24 日午前 9:31 UTC](https://www.nocode-faq.com/t/topic/2894/2 "2022-05-24T09:31:12Z")

</div>

RepeatingGroupに対してZ-indexを設定してみてはいかがでしょうか。

Visual elements =\> HTMLを配置し以下のコードを入力  
対象のRepeatingGroupのID Attributeに"floating"

```auto
<style type="text/css">
 #floating {
position: sticky;
top: 0;
z-index: 99;
}
</style>

```

---

<div class="post-metadata">

**Author:** ![Taiyo](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/taiyo/32/4508_2.png) [@Taiyo](https://www.nocode-faq.com/u/Taiyo)\
**Post date:** [2022 年 5 月 24 日午前 9:32 UTC](https://www.nocode-faq.com/t/topic/2894/3 "2022-05-24T09:32:50Z")

</div>

johnさんありがとうございます！

なるほどです！position: sticky;を指定すれば良いのですね！試してみます！

---

<div class="post-metadata">

**Author:** ![john03tgck01a](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/john03tgck01a/32/4558_2.png) [@john03tgck01a](https://www.nocode-faq.com/u/john03tgck01a)\
**Post date:** [2022 年 5 月 24 日午前 9:37 UTC](https://www.nocode-faq.com/t/topic/2894/4 "2022-05-24T09:37:22Z")

</div>

はい！お試しください。  
ちなみにPositionについては以下の記事を参考にしました。

> stickyに指定した場合、その要素の位置がウインドウ全体を基準として、指定位置の条件を満たすとフロートされます。またその範囲はstickyを囲っている要素内に限られ、囲っている要素の端まで来るとそこで固定されます。そして、指定位置に配置されている間も通常位置に高さを有しています。

> **[positionプロパティを身に着けよう！stickyの仕様と使い方を解説！ | ビジネスとIT活用に役立つ情報（株式会社アーティス）](https://www.asobou.co.jp/blog/web/css-sticky)**
>
> 前回の記事positionプロパティを身に着けよう！基本的な知識と使い方を解説！（基礎編）ではpositionプロパティにおける4つの値について解説しました。 今回はこれらの値全てと類似点を持つposition: sti...

---

<div class="post-metadata">

**Author:** ![Taiyo](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/taiyo/32/4508_2.png) [@Taiyo](https://www.nocode-faq.com/u/Taiyo)\
**Post date:** [2022 年 5 月 24 日午前 9:39 UTC](https://www.nocode-faq.com/t/topic/2894/5 "2022-05-24T09:39:35Z")

</div>

ありがとうございます！

---

<div class="post-metadata">

**Author:** ![yukikun](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yukikun/32/3485_2.png) [@yukikun](https://www.nocode-faq.com/u/yukikun)\
**Post date:** [2022 年 5 月 26 日午前 4:06 UTC](https://www.nocode-faq.com/t/topic/2894/6 "2022-05-26T04:06:37Z")

</div>

CSSを書かずとも、Repeating group内でフロート表示させたいエレメントをreusableで作れば実現できますよ。

---

<div class="post-metadata">

**Author:** ![Taiyo](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/taiyo/32/4508_2.png) [@Taiyo](https://www.nocode-faq.com/u/Taiyo)\
**Post date:** [2022 年 5 月 28 日午前 11:10 UTC](https://www.nocode-faq.com/t/topic/2894/7 "2022-05-28T11:10:08Z")

</div>

ご教授くださりありがとうございました！実装できました！