固定位置div内模
问题描述：
美好的一天。我有一个问题，我想修正一个模式内的div的位置。 Here is the div i want to position fixed固定位置div内模
这里就是，它确实代码：
<?php $this->load->view('includes/home-nav-bar'); ?>
<!--================================
= USER POSTS =
=================================-->
<div class="container-fluid nightMode-Black" style="padding: 0 !important;">
<div class="col-md-3 "></div>
<div class="col-md-6 a-divHome">
<div class="row" id="ideasActions">
<div class="row">
<br>
<h4>Share your Work</h4>
<br>
<div class="col s12">
<ul class="tabs tabs-fixed-width bg-color-white nightMode-Black">
<li class="tab col s3" >
<center>
<a class=" active hide-on-large-only " href="#discussion">
<li class="material-icons active">chrome_reader_mode</li>
</a>
</center>
<a class="active hide-on-med-and-down" href="#discussion">Discussion</a>
</li>
<li class="tab col s3">
<center>
<a class="active hide-on-large-only " href="#photoVideo">
<li class="material-icons">collections</li>
</a>
</center>
<a class="hide-on-med-and-down" style="font-size: 1vw" href="#photoVideo" >Photo/Video Upload</a>
</li>
<li class="tab col s3">
<center>
<a class="active hide-on-large-only " href="#file">
<li class="material-icons">attach_file</li>
</a>
</center>
<a class="hide-on-med-and-down" style="font-size: 1vw" href="#file" >File Upload</a>
</li>
</ul>
</div>
<div id="discussion" class="col s12">
<form id="formText" action="" method="post">
<div class="input-field">
<label>What are your thoughts?</label>
<textarea class="materialize-textarea validate"
value="" data-length="250" required name="txtStatus"></textarea>
</div>
<div class="input-field">
<button type="submit" value="Upload"
class="btn btn-floating btn-large pulse green right">
<i class="material-icons">cloud_upload</i>
</button>
</div>
</form>
</div>
<div id="photoVideo" class="col s12">
<form action="<?=base_url()?>Home/updatePost" method="post">
<div class="row" id="image_preview"></div>
<div class="file-field input-field">
<div class="btn">
<span>Choose Photo/Video</span>
<input type="file" id="upload_photo" name="upload_photo[]" onchange="preview_image();" multiple>
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
<div class="row">
<button id="addCategory" type="button" class="btn waves-effect waves-light small">Add Categories</button>
</div>
<!--================================
= CATEGORIES =
=================================-->
<div class="row" id="categories" style="display: none;">
<div class="col s12">
<div class="col s3">
<p>
<input type="checkbox" id="digitalArt" />
<label for="digitalArt">Digital Art</label>
</p>
<p>
<input type="checkbox" id="traditionalArt" />
<label for="traditionalArt">Traditional Art</label>
</p>
<p>
<input type="checkbox" id="photography" />
<label for="photography">Photography</label>
</p>
<p>
<input type="checkbox" id="artisanCrafts" />
<label for="artisanCrafts">Artisan Crafts </label>
</p>
<p>
<input type="checkbox" id="literature" />
<label for="literature">Literature</label>
</p>
</div>
<div class="col s3">
<p>
<input type="checkbox" id="filmAndAnimation" />
<label for="filmAndAnimation">Film and Animation </label>
</p>
<p>
<input type="checkbox" id="motionBooks" />
<label for="motionBooks">Motion Books </label>
</p>
<p>
<input type="checkbox" id="flash" />
<label for="flash">Flash </label>
</p>
<p>
<input type="checkbox" id="desAndInt" />
<label for="desAndInt">Designs and Interfaces</label>
</p>
<p>
<input type="checkbox" id="customization" />
<label for="customization">Customization </label>
</p>
</div>
<div class="col s3">
<p>
<input type="checkbox" id="cartAndCom" />
<label for="cartAndCom">Cartoons and Comics </label>
</p>
<p>
<input type="checkbox" id="ManAndAnim" />
<label for="ManAndAnim">Manga and Anime</label>
</p>
<p>
<input type="checkbox" id="anthro" />
<label for="anthro">Anthro</label>
</p>
<p>
<input type="checkbox" id="fanArt" />
<label for="fanArt">Fan Art</label>
</p>
</div>
<div class="col s3">
<p>
<input type="checkbox" id="comProj" />
<label for="comProj">Community Projects </label>
</p>
<p>
<input type="checkbox" id="contest" />
<label for="contest">Contests </label>
</p>
<p>
<input type="checkbox" id="journals" />
<label for="journals">Journals </label>
</p>
<p>
<input type="checkbox" id="scraps" />
<label for="scraps">Scraps </label>
</p>
</div>
</div>
</div>
<!--==== End of CATEGORIES ====-->
<div class="input-field">
<button type="submit" value="Upload" class="btn btn-floating btn-large pulse green right">
<i class="material-icons">cloud_upload</i></button>
</div>
</form>
</div>
<div id="file" class="col s12">
<form action="<?=base_url()?>Home/updatePost" method="post">
<div class="row" id="file_preview"></div>
<div class="file-field input-field">
<div class="btn">
<span>Choose File</span>
<input type="file" id="upload_file" name="upload_file[]" onchange="file_preview();" >
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
<div class="input-field">
<button type="submit" value="Upload" class="btn btn-floating btn-large pulse green right"><i class="material-icons">cloud_upload</i></button>
</div>
</form>
</div>
</div>
</div>
<div class="row hide-on-large-only">
<!--=====================================
= WORKFEED MOBILE =
=========================================-->
<div id="workFeed" class="col s12">
<div class="row a-padTop">
<div class="col s12 m12">
<div class="card sticky-action hoverable">
<div class="card-content nightMode-Black" style="padding:1%;">
<div class="row valign-wrapper" style="padding:1% 0 1% 3%; margin-bottom: 0;">
<div class="col-md-2" style="padding-right: 0; margin-right: 0;">
<img
src="<?=base_url()?>assets/img/sample.svg"
style=" width:80%"
class="responsive-img circle bg-color-black ">
</div>
<div class="col-md-6">
<h5>
<blockquote>
<!-- @change dynamic data from database -->
<?=ucfirst($userInfo['firstname']." ".$userInfo["lastname"]);?>
</blockquote>
</h5>
<p>Shared at October 27, 2017</p>
</div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
</div>
<div class="card-image">
<!-- @change use dynamic data in data-caption and card title from database -->
<img class="materialboxed" data-caption="Loren Legarda" src="<?=base_url()?>assets/img/sample_pic.jpg">
<span class="card-title">Loren Legarda</span>
</div>
<div class="card-content nightMode-Black">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</div>
<div class="card-action nightMode-Black">
<!--================================
= FOR MOBILE =
=================================-->
<div class="row hide-on-large-only">
<div class="row">
<div class="col s12">
<!-- @change 54 and 15 to dynamic data from database-->
<div class="chip bg-color-orange">
Appreciations <span class="color-red">54</span>
</div>
<div class="chip bg-color-lightblue ">
Comments <span class="color-red">15</span>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="col s3">
<a class="btn-floating btn-small waves-effect waves-light bg-color-red right">
<i class="material-icons ">flag</i>
</a>
</div>
<div class="col s3">
<a class="btn-floating btn-small waves-effect waves-light bg-color-orange right">
<i class="material-icons ">book</i>
</a>
</div>
<div class="col s3">
<a class="btn-floating btn-small waves-effect waves-light bg-color-orange right">
<i class="material-icons ">lightbulb_outline</i>
</a>
</div>
<div class="col s3">
<a class="btn-floating btn-small waves-effect waves-light bg-color-lightblue right">
<i class="material-icons activator">comment</i>
</a>
</div>
</div>
</div>
</div>
<!--==== End of FOR MOBILE ====-->
<!-- COMMENTS -->
<div class="row">
<div class="col-md-8">
<div class="row input-field">
<label>Add Comment</label>
<input type="text" name="">
</div>
</div>
<div class="col-md-4 ">
<div class="row input-field valign-wrapper">
<button type="submit" class="btn red right waves-light waves-effect">Comment</button>
</div>
</div>
</div>
</div>
<!--===================================
= USER COMMENTS =
====================================-->
<div class="card-reveal nightMode-Black">
<span class="card-title nightMode-Black">Comments<i class="material-icons right">close</i></span>
<div class="row">
<div class="col s6">
<div class="chip">
<!-- @change // DYNAMIC COMMENTS CHANGE TO USER ID NUNG NAG COMMENT -->
<img src="<?=base_url()?>assets/img/sample.svg" alt="Contact Person">
<?=$userInfo['firstname']?>
</div>
</div>
<div class="col s6">
<!-- @change // DYNAMIC COMMENTS CHANGE TO COMMENT NUNG NAG COMMENT -->
<[email protected] id to Comment<?=$userInfo['user_id']?> -->
<span class="truncate Comment1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
<h6>
<a data-value="Comment1" class="color-blue showMore">More</a>
</h6>
</div>
</div>
<div class="row">
<div class="col s6">
<div class="chip">
<!-- @change // DYNAMIC COMMENTS CHANGE TO USER ID NUNG NAG COMMENT -->
<img src="<?=base_url()?>assets/img/sample.svg" alt="Contact Person">
<?=$userInfo['firstname']?>
</div>
</div>
<div class="col s6">
<!-- @change // DYNAMIC COMMENTS CHANGE TO COMMENT NUNG NAG COMMENT -->
<[email protected] id to Comment<?=$userInfo['user_id']?> -->
<span class="truncate Comment2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
<h6>
<a data-value="Comment2" class="color-blue showMore">More</a>
</h6>
</div>
</div>
</div>
<!--==== End of USER COMMENTS ====-->
</div>
</div>
</div>
</div>
<!--==== End of WORKFEED MOBILE ====-->
</div>
<div class="row hide-on-med-and-down">
<!-- Modal Trigger -->
<!-- @change postID to post ID -->
<a class="waves-effect waves-light btn modal-trigger " href="#postId">Modal</a>
<!-- Modal Structure -->
<div id="postId" class="modal workFeedPost nightMode-Black bg-color-white">
<div class="modal-content">
<!--==================================
= WORKFEED WEB =
===================================-->
<div id="workFeed" class="row">
<div class="col s8">
<div class="card nightMode-Black bg-color-white sticky-action hoverable">
<div class="card-image">
<!-- @change use dynamic data in data-caption and card title from database -->
<img class="materialboxed" data-caption="Loren Legarda" src="<?=base_url()?>assets/img/sample_pic.jpg">
<span class="card-title">Loren Legarda</span>
</div>
<div class="card-content nightMode-Black">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</div>
<br><br>
</div>
<div class="card hoverable">
<div class="card-image">
<!-- @change use dynamic data in data-caption and card title from database -->
<img class="materialboxed" data-caption="Loren Legarda" src="<?=base_url()?>assets/img/sample_pic.jpg">
<span class="card-title">Loren Legarda</span>
</div>
<div class="card-content nightMode-Black">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</div>
<br><br>
</div>
</div>
<div class="col s4" >
<div class="card">
<div class="card-content bg-color-white nightMode-Black" style="padding:1%;">
<div class="row valign-wrapper" style="padding:1% 0 1% 3%; margin-bottom: 0;">
<div class="col-md-6">
<h5>
<blockquote>
<!-- @change dynamic data from database -->
<?=ucfirst($userInfo['firstname']." ".$userInfo["lastname"]);?>
</blockquote>
</h5>
<p>Shared at October 27, 2017</p>
</div>
<div class="col-md-4" style="padding-right: 0; margin-right: 0;">
<img
src="<?=base_url()?>assets/img/sample.svg"
style=" width:80%"
class="responsive-img circle bg-color-black ">
</div>
<div class="col-md-2">
<a data-position="bottom" data-delay="50" data-tooltip="Save to collections" class="tooltipped btn-floating btn-small waves-effect waves-light bg-color-orange right">
<i class="material-icons ">book</i>
</a>
</div>
</div>
</div>
<div class="card-action bg-color-white nightMode-Black">
<!--=============================
= FOR WEB =
==============================-->
<div class="row hide-on-med-and-down">
<div class="col s7">
<div class="chip bg-color-orange">
<!-- @change 54 and 15 to dynamic data from database-->
Appreciations <span class="color-red">5400</span>
</div>
<div class="chip bg-color-lightblue ">
Comments <span class="color-red">15</span>
</div>
</div>
<div class="col s5">
<a data-position="bottom" data-delay="50" data-tooltip="Report" class="tooltipped btn-floating btn-small waves-effect waves-light bg-color-red right">
<i class="material-icons ">flag</i>
</a>
<a data-position="bottom" data-delay="50" data-tooltip="Appreciate" class="tooltipped btn-floating btn-small waves-effect waves-light bg-color-orange right" >
<i class="material-icons ">lightbulb_outline</i>
</a>
<a data-position="bottom" data-delay="50" data-tooltip="Show Comments" class="tooltipped btn-floating btn-small waves-effect waves-light bg-color-lightblue right">
<i class="material-icons activator">comment</i>
</a>
</div>
</div>
<!--==== End of FOR WEB ====-->
<!-- COMMENTS -->
<div class="row">
<div class="col-md-8">
<div class="row input-field">
<label>Add Comment</label>
<textarea class="materialize-textarea validate"
value="" data-length="250" required name="txtStatus"></textarea>
</div>
</div>
<div class="col-md-4 ">
<div class="row input-field ">
<button type="submit" class="btn btn-small red right waves-light waves-effect">Comment</button>
</div>
</div>
</div>
</div>
<!--===================================
= USER COMMENTS =
====================================-->
<div class="card-reveal bg-color-white nightMode-Black">
<span class="card-title nightMode-Black">Comments<i class="material-icons right">close</i></span>
<div class="row">
<div class="col s6">
<div class="chip">
<!-- @change // DYNAMIC COMMENTS CHANGE TO USER ID NUNG NAG COMMENT -->
<img src="<?=base_url()?>assets/img/sample.svg" alt="Contact Person">
<?=$userInfo['firstname']?>
</div>
</div>
<div class="col s6">
<!-- @change // DYNAMIC COMMENTS CHANGE TO COMMENT NUNG NAG COMMENT -->
<[email protected] id to Comment<?=$userInfo['user_id']?> -->
<span class="truncate Comment1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
<h6>
<a data-value="Comment1" class="color-blue showMore">More</a>
</h6>
</div>
</div>
<div class="row">
<div class="col s6">
<div class="chip">
<!-- @change // DYNAMIC COMMENTS CHANGE TO USER ID NUNG NAG COMMENT -->
<img src="<?=base_url()?>assets/img/sample.svg" alt="Contact Person">
<?=$userInfo['firstname']?>
</div>
</div>
<div class="col s6">
<!-- @change // DYNAMIC COMMENTS CHANGE TO COMMENT NUNG NAG COMMENT -->
<[email protected] id to Comment<?=$userInfo['user_id']?> -->
<span class="truncate Comment2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
<h6>
<a data-value="Comment2" class="color-blue showMore">More</a>
</h6>
</div>
</div>
</div>
<!--==== End of USER COMMENTS ====-->
</div>
</div>
</div>
</div>
<!--==== End of WORKFEED WEB ====-->
</div>
</div>
</div>
<div class="col-md-3 hide-on-med-and-down a-div-height a-divHome" >
<div class="row">
<h5 class="color-black right-align">Actions</h5>
<div class="switch right-align">
<label>
Hide ideas actions
<input type="checkbox" class="hideIdeasActions" checked="">
<span class="lever" ></span>
</label>
</div>
<br>
<div class="switch right-align">
<label>
Switch to night mode
<input type="checkbox" class="toNightMode" >
<span class="lever" ></span>
</label>
</div>
</div>
</div>
</div>
<!--==== End of USER POSTS ====-->
导致此： Image
的这里的问题是，它改变其位置和固定位置不工作。 P.s这个div是在一个模态 PPS。这个div是另一个DIV
答
我们需要看到你的CSS，以便知道如何解决这个问题，但一般里面，添加此代码应该做的伎俩：
.divname{
position:fixed;
top:0;
right:0;
}
如果它是你不是什么寻找，发布代码演示链接，我会很乐意看看它。
+0
这不是一个正常运行的例子，但它包括所有的代码 https://jsfiddle.net/hhn1vzvL/ –
+0
和顺便说一句，我用materializecss其他css可以在materializecss.com找到它 –
答
所以，我做了一些研究，发现，你可以使DIV滚动，这就是我做我只是说
<div class="col s8" style="overflow-y: scroll; height:90vh;">
，使它看起来像这样Image
谢谢大家！
将你父母的div分成两部分，像1：'col-md-8''和2nd：'col-md-4'，并按照这种方式安排你的代码[https：// www。 w3schools.com/bootstrap/bootstrap_grid_basic.asp） –
@ChetanShankar我已经做到了 –
然后后整个代码或给的代码片段 –