Question

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

<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>

Answer 1

position:fixed会将元素放在文档流 相对位置之外到最近的视口 。默认情况下，这将是<body>。
position:absolute会将元素放置在文档流 之外，相对于最近的祖先 。除了position（默认值）之外，这将是具有集合static的最近祖先。

总之，请提供您的<button> position:absolute和<ul> position:relative;

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

1 个答案: