Skip to content

Instantly share code, notes, and snippets.

@outoftime

outoftime/index.html

Created July 13, 2017 13:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save outoftime/08e6f8461bb110ff1cb14fcdeeaf0856 to your computer and use it in GitHub Desktop.
Save outoftime/08e6f8461bb110ff1cb14fcdeeaf0856 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=08e6f8461bb110ff1cb14fcdeeaf0856
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<div class="col-xs-offset-2 col-xs-8">
<div aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Why is the text overlapping?</h4>
</div>
<div class="modal-body">
How can we make it so the text behind the modal to stay there?
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Close</button> <button class="btn btn-primary" type="button">Save changes</button>
</div>
</div>
</div>
</div>
<h1>Can you fix this modal?</h1>
<p>The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only effects elements that have a position value other than static (the default).</p>
<p>Elements can overlap for a variety of reasons, for instance relative positioning has nudged it over something else. Negative margin has pulled the element over another. Absolutely positioned elements overlap each other. All sorts of reasons.*</p><img src="https://css-tricks.com/wp-content/uploads/2011/09/basicz-index.png"> <small>*<a href="https://css-tricks.com/almanac/properties/z/z-index/">https://css-tricks.com/almanac/properties/z/z-index/</a></small> <!-- Modal -->
<p><button class="btn btn-primary btn-lg" data-target="#myModal" data-toggle="modal" type="button">Launch demo modal</button></p>
</div>
</div>
</body>
</html>
Raw
popcode.json
{"enabledLibraries":["jquery","bootstrap"]}
Raw
styles.css
p{
position:relative;
z-index:1050;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment