fixed-action-btn inside a collapsible body

I am trying to add a fixed-action-btn inside a collapsible body. But in html page it is appearing in bottom right corner of page always not inside the collapsible. How to keep btn inside the body?

https://codepen.io/rils/pen/qpOoeJ

<div style="padding-left: 500px" id="rView">

    <ul class="collapsible" data-collapsible="accordion" id="reg_view">
        <li>
            <div class="collapsible-header">IPC > PS xxxx </div>
            <div class="collapsible-body">
                <div class="row">
                    <div class="input-field col s1 tooltipped " data-position="bottom" data-delay="50"
                         data-tooltip="I am a tooltip">
                        <input id="first_name" type="text" value="00" class="validate">
                        <label for="first_name">31-21</label>
                    </div>
                    <div class="input-field col s1">
                        <input id="first_name" type="text" value="01" class="validate">
                        <label for="first_name">20-8</label>
                    </div>
                    <div class="input-field col s1">
                        <input id="first_name" type="text" value="10" class="validate">
                        <label for="first_name">7-0</label>
                    </div>
                    <div class="input-field col s4">
                        <input id="first_name" type="text" value="0x11002200" class="validate">
                        <label for="first_name">0x40023ff8</label>
                    </div>
                     <div class="fixed-action-btn horizontal click-to-toggle" style="position: absolute">
                        <a class="btn-floating btn-large red">
                            <i class="material-icons">menu</i>
                        </a>
                        <ul>
                            <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
                            <li><a class="btn-floating yellow darken-1"><i
                                    class="material-icons">format_quote</i></a></li>
                            <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
                            <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="divider"></div>
                <table>
                    <thead>
                    <tr>
                        <th>FIELD</th>
                        <th>DESC</th>
                        <th>RW</th>
                        <th>DEFAULT VALUE</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr>
                        <td>0-7</td>
                        <td>ID</td>
                        <td>RW</td>
                        <td>1 INTERFACE</td>
                    </tr>
                    <tr>
                        <td>8-21</td>
                        <td>ID</td>
                        <td>RW</td>
                        <td>2 INTERFACE</td>
                    </tr>
                    <tr>
                        <td>22-31</td>
                        <td>ID</td>
                        <td>RW</td>
                        <td>3 INTERFACE</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </li>
    </ul>
</div>

Solution

position:fixed will place the element outside the document flow relative to the closest viewport. By default, that would be <body>.
position:absolute will place the element outside the document flow relative to the closest positioned ancestor. That would be the closest ancestor with a set position, other than static (which is default).

In conclusion, give your <button> position:absolute and your <ul> position:relative;