Please consider this jsFiddle. It is equivalent (code wise) to this Stack Snippet:
$(document).ready(function () {
$('.modal').modal("show");
});
body {
padding-top: 50px;
}
.my-module {
position: fixed;
top: 0;
left: 0;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<p>Lorem ipsum dolor sit amet.</p>
<div class="my-module">This container contains the modal code.
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">Modal</div>
</div>
</div>
</div>
</div>
However, the Stack Snippet renders differently, it does not show the problem I'm trying to reproduce, whereas the jsFiddle does.
The reason's because of the way the Stack Snippet is rendered (abbreviated):
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin-top: 10px;
padding-top: 50px;
}
.my-module {
position: fixed;
top: 0;
left: 0;
border: 1px solid red;
}
</style>
</head>
<body>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
... etc
The problem is caused by the order of the CSS. I want / expect the external CSS files to load before the snippet's CSS. I think that's reasonable, as most external CSS files will be those for libraries like Bootstrap, and should come before any page-specific styles.
In addition to the order problem, I also noted the link
elements are placed inside the body. I'm unsure whether that's correct or not, if I understand this question's main answer correctly they should be inside the head
, because they have a rel
attribute (haven't double checked that though!).
<link>
elements should be included in the<head>
and not the other way around like it is now. People usually want to include standard plugins with their styles like jQuery UI or Bootstrap and then overwrite them. There might not be that many cases since less people seems to include a full running Code Snippet but when people actually want to make it work they are stopped by the design of the Stack Snippets.