固定动作btn在可折叠的身体内

问题描述 投票:0回答:1

我试图在可折叠的体内添加一个固定动作btn。但是在html页面中,它出现在页面的右下角总是不在可折叠内部。如何将btn保持在体内?

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>
javascript jquery html css materialize
1个回答
2
投票
  • position:fixed将元素放在文档流之外,相对于最近的视口。默认情况下,这将是<body>
  • position:absolute将元素放置在文档流之外,相对于最近的祖先。除了position(默认值)之外,这将是最接近祖先的static集合。

总之,给你的<button> position:absolute和你的<ul> position:relative;

© www.soinside.com 2019 - 2024. All rights reserved.