Question

我在另一个名为fixed的div中有一个div元素。我想要的是保持div fixed可滚动。这是一个固定div的CSS：

#fixed
{
    overflow:scroll;
    position:fixed;
    height:450px;
}

HTML code：

    <form name="myForm" class="formcss" method="POST" action="create3.php" id="reportform" enctype="multipart/form-data">

<fieldset>
<img src="img/stuff.png" style="margin-left:35%; width:320px;">
    <div class="large-3 columns" style="margin-top:1.5%;" id="fixed">
        <label>Choose username</label>
        <input placeholder="Search Me" id="box" type="text" />

        <select>
          <option disabled selected>Sort By</option>
          <option value="new">Free Artists</option>
          <option value="asc">Artists with 1 project</option>
          <option value="desc">Artists with 1+ projects</option>
        </select>

        <input type='checkbox' value="ft" onclick="getUsers('sort',this.value)">FT</input>
        <input type='checkbox' value="ct" onclick="getUsers('sort',this.value)">CT</input>
        <input type='checkbox' value="ap" onclick="getUsers('sort',this.value)">AP</input>
        <input type='checkbox' value="ct3" onclick="getUsers('sort',this.value)">CT-3</input>
        <input type='checkbox' value="ct6" onclick="getUsers('sort',this.value)">CT-6</input>           

        <div id="myAccordion">
        <?php //for($i=321; $i<347; $i++)
              //{
                //echo "<h3>".chr($i)."</h3>";
                echo "<h3>Names</h3>";
                echo '<ul class="source">'; 
                $sql = "SELECT username FROM user ";
                $result = $conn->query($sql);       
                if ($result->num_rows > 0) 
                {
                    // output data of each row
                    while($row = $result->fetch_assoc()) 
                    {  
                        $name= $row["username"];    
                        echo"<li class='item'><span class='closer'>x</span>".$name."</li>";
                    }
                    }
                    else 
                    {
                        echo "0 results";
                    }                       
                echo '</ul>';                   
            //}
        ?>  
        </div>
    </div>

        <label>Project <?php echo $code?></label>
        <div class="rowone">
            <div class="projLeader">
            <label>Captain:</label>
                <ol>
                    <li class="placeholder" name="projLeader"><div class="adding">Drop Here</div></li>
                    <input type="hidden" name="projLeader" class="hiddenListInput1" required/>
                </ol>
            </div>
            <div class="info">
            <label>Information:</label>
                <ol>
                    <li class="totalinfo">Total: 0.</li>
                    <li class="leaderinfo">Process Leaders: 0.</li>
                    <li class="checkerinfo">Process Checkers: 0.</li>
                    <li class="staffinfo">Process Artists: 0.</li>
                </ol>
            </div>                  
            <div class="projChecker">
            <label>Coordinator:</label>
                <ol>
                    <li class="placeholder" name="projChecker"><div class="adding">Drop Here</div></li>
                    <?php 
                            //echo '<li class="dropClass" name="projChecker"> <span class="closer">x</span>'.$_SESSION['projChecker'].'</li>';
                    ?>
                    <input type="hidden" name="projChecker" class="hiddenListInput2" required/>
                </ol>
            </div>
        </div>
        <div class="rowtwo">
        <?php 
            for($y=0;$y<$len;$y++)
            {   
                echo "<div class='proc'> <pre>";
                echo "<h6 >Process: ".$proc[$y]."      "   ;
                echo "People required: ".$num[$y].".      ";    
                echo "<span class='assigned' name='assigned[]' >People Assigned: 0. </span>    <input class='unchecked' id='unchecked' type='hidden' name='link[]' value='0'/><input class='checked' id='checked' type='checkbox' name='link[]' value='1'><i title='Activate Process' class='fi-link'></i>Link Process</input></h6></pre>";
        ?>

            <div class="procLeader">
            <label>Leader:</label>  
                <ol>
                    <li class="placeholder"><div class="adding">Drop Here</div></li>
                </ol>
            </div>

            <div class="procChecker">
            <label>Checker:</label>
                <ol>
                    <li class="placeholder"><div class="adding" >Drop Here</div></li>
                </ol>
            </div>

            <div class="procStaff"> 
            <label>Artist:</label>
                <ol>
                    <li class="placeholder"><div class="adding">Drop Here</div></li>
                </ol>
            </div>  
            <!--<div class="small-8 large-8 columns" style="margin-left: 15%;">
            <div class="form-group">
                <label>Studio:  <small id="small">*</small>         
                    <div class="multiselect">               
                        <div class="selectBox">                 
                            <select onclick="showCheckboxes()"  class="input input1 name">
                                <option>-- Select an option --</option>         
                            </select>
                            <div class="overSelect"></div>
                        </div>
                        <div class="scrollable" id="checkboxes">    
                        <?php 
                            while ($row = mysqli_fetch_array($resultStudio))
                            {
                                $row[0] = cleanOutputData($row[0]);

                                if(isset($studio))
                                {
                                    foreach($studio as $code)
                                    {
                                        if($row[0] == $code)
                                        {
                                            $match = 1;
                                            break;
                                        }
                                        else
                                            $match = 0;
                                    }
                                }                       
                        ?>  
                            <div class="row">
                                <div class="small-12 large-12 columns">
                                <label style="height: 37px; width:70%; float:left;" >
                                <input type='checkbox' class="checkbox" style="margin-left:5%; width:15%;" name='studio[]' id=<?php echo $row[0] ?>  value="<?php echo $row[0] ?>" /><?php echo $row[0] ?>
                                </label>

                                </div>
                            </div>

                        <?php
                            }
                            mysqli_free_result($result);
                        ?>      
                        </div>
                    </div>
                </label>
            </div>              
            </div>-->
            <div class="small-8 large-8 columns" style="margin-left: 25%;">
            <table class="multiselect">
                <tr><td><label>Studio:</label>  </td></tr>
                <tr>
                <td >
                    <select  class="input input1 name">
                        <option>       -- Select Studio --</option>
                        <?php echo $studio ?>
                    </select>
                </td>
                <td><input id="img" class='AddNew' type="image" src="img/add.png" alt="Submit" onClick="return false;"></td>
                <td><input type='button' class='AddNew' value='Add new item'></td>
                </tr>
            </table>
            </div>



        <?php       
                echo "</div>";                      
            }
        ?>  
        </div>      
        <div class="row">
            <div class="small-6 large-6 columns">
                <input type = "submit" style="margin-left:300px; width:150px;" id="savebutton" name ="submit" class="button" value = "Create Project" onclick="userSubmitted = true;"/>         
                </div>
        </div>              
    <div class="output1"></div>             
    <div class="output2" ></div>    
    <div class="output3"></div>                 
    </div>      
</fieldset>
</form>

我使用position: fixed时的got。但是当我向下滚动时，我希望它留在白色区域内。我希望它像this。如何实现？

修改

在提出解决方案后，我编辑了这样的代码：

.formcss{
  position: relative;
  margin-left:65px;
  margin-right:470px;
  margin-top:50px;
  width:90%;
}

#fixed
{
  overflow:scroll;
  position: absolute;
  height:450px;
}

Answer 1

position: fixed; 使元素相对于浏览器窗口的位置（因此它随之滚动），不是任何其他DOM元素。所以在你的情况下它应该是这样的：

#fixed
{
   overflow:scroll;
   position:fixed;
   left: 1rem; // your distance from left edge of the window
   top: 1rem; // your distance from top edge of the window
   height:450px;
}

如果您希望实现的目标是将#fixed 附加到您网站的特定区域而不是窗口，那么您正在寻找的内容for position: absolute;上的#fixed和position: relative;的父级，如：

.parent {
  position: relative;
}
#fixed { 
  overflow:scroll;
  position: absolute;
  top: 1rem; // your distance from top edge of the parent
  left: 1rem; // your distance from left edge of the parent
  height:450px;
}

您可以随时play around使用职位更好地理解他们。

修改

将fixed与absolute进行比较。这两个示例之间的区别仅在于CSS部分的第二行：position。

我无法在提供的代码上重新创建此示例，因为它包含许多错误（比如关闭<input></input>），所以请务必validate。

我希望您能够按照我为这两种情况提供的代码示例实现您想要的效果。

Answer 2

而不是position: fixed在父级上使用position: absolute和position: relative，该方式元素将修复到父元素位置。

// !ONLY FOR DEMO!
$(document).ready(function() {
  $('div').animate({
    left: '80%',
    top: '80%',
  }, 5000);
});

.wrapper div {
  position: relative;
  background: #aaa;
  width: 100px;
  height: 100px;
}
.wrapper div:after {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 15px;
  height: 15px;
  background: red;
  content: '-^-';
}
.wrapper {
  width: 100%;
  height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div></div>
</div>

Answer 3

这是preview

.parent {
  width: 100%;
  height: 500px;
  background-color: #fff;
  border: 1px solid gray;
  position: relative;
}

.child {
  box-sizing:border-box;
  position: absolute;
  top:0;
  left:0;
  color: #252525;
  padding: 15px;
  height: 100%;
  width: 40%;
  overflow-y: scroll;
  background: #fff5f1;
}

保持div只在另一个div内修复，不要让它超出父div

修改

3 个答案: