Question

我正在尝试将div id #left定位在我的图片下方。不幸的是，这两个人不断陷入困境。

我该如何解决这个问题？ #left div必须是固定位置。

如果你想运行它以查看它的外观：
HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>iSignout</title>

    <link type="text/css" rel="stylesheet" href="bootstrapCSS.css"/>
     <link href="css/bootstrap.min.css" rel="stylesheet"

  </head>
  <body>
    <img src="http://businessgross.com/wp-content/uploads/2013/05/Employee.png">
    <br>

    <div id="left">
            <h3 id=add>Add An Employee</h3>
            <form>
                <label for="firstName">First Name: </label>
                <input type="text" name="firstName"><br>
                <label for="lastName">Last Name: </label>
                <input type="text" name="lastName"><br>
                <label for="phone">Phone Number: </label>
                <input type="tel" name="phone"><br>
                <label for="email">E-Mail: </label>
                <input type="email" name="email"><br>
                <input type="button" value="Add" id="submit" />
            </form>
        </div>

    <!--Creates the tables with employees -->
    <div id='center'>
        <table class= 'table table-hover'>
            <thead>
                <tr id="title"><th colspan=3>People In the Office</th></tr>
            </thead>

            <tbody>
            <!--Create rows here -->
                <tr>
                    <th>Name</th>
                    <th class>IN/OUT Status</th>
                    <th>Optional Note</th>
                </tr>

                <tr id= "peter-griffin">
                    <td>
                        <a href="#openModal">Peter Griffin</a>

                            <div id="openModal" class="modalDialog">
                                <div>
                                    <a href="#close" title="Close" id='modalClose' class="close">X</a>
                                    <h2>Peter Griffin</h2>
                                        <p>Phone:123-456-7890.</p>
                                        <p>email: petergriffin@gmail.com</p>
                                </div>
                            </div>
                    </td>
                    <td> 
                        <input type='radio' name="Peterpresent">In<br>
                        <input type='radio' name="Peterpresent">Out
                    </td>
                    <td>
                        <button type="button" id='del' class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <textarea placeholder="Optional Note about where your are or your schedule"></textarea>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>


    <!-- start: Delete Coupon Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h3 class="modal-title" id="myModalLabel">Warning!</h3>

            </div>
            <div class="modal-body">
                 <h4> Are you sure you want to DELETE?</h4>

            </div>
            <!--/modal-body-collapse -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="btnDelteYes" href="#">Yes</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            </div>
            <!--/modal-footer-collapse -->
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="bootstrap_script.js"></script>

  </body>
</html>

CSS：

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}


.modalDialog > div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}

fomr > label {
    clear:left;
    text-align:right;
    padding-bottom: .25em;
}

body {
    background-image:url('http://automobilein.com/wp-content/uploads/2014/02/Background-Wallpaper-Hd.jpg');
    }

#left {
    display:inline-block;
    position:fixed;
    float:left;
    border:3px solid black;
    background-color: #B20000;
    margin-left: 2em;
    padding: .5em;
}


#center  {
    margin-left:auto;
    margin-right:auto;
    width:40%;
    padding:3em;
    text-align:center;
}

img {
    height: 20%;
    width:20%;
    position: absolute;
    top:1em;
    left:1em;
}

Answer 1

您可以像这样定义#left div的顶部偏移：

#left {
  top: 60px;
}

结帐fiddle

Answer 2

添加

margin-top:5em;

在你的#left css

中

jsfiddle

CSS在图像左侧和下方浮动

2 个答案: