Why won't my div stay fixed on the screen?
up vote
0
down vote
favorite
I am creating a popup that should be fixed on the screen but for some reason it will not work. Here is the code...
Html.
<div id='hear-about-us-div' style='display:block'>
<h2 id='hdyhau-header'>How did you hear about us?</h2>
<form name='hear-about-us-form'>
<label>Facebook</label>
<input type='checkbox' name='facebook' />
<label>Instagram</label>
<input type='checkbox' name='instagram'/>
<label>Friends or family</label>
<input type='checkbox' name='friendsOrFamily'/>
<label>Email</label>
<input type='checkbox' name='email'/>
<label>Other</label>
<input type='checkbox' name='other'/>
<input type='submit' value='Submit'/>
</form>
</div>
CSS.
#hear-about-us-div {
display: block;
width: 50%;
text-align: center;
left: 25%;
height: 250px;
position: fixed;
background-color: #EB8364;
z-index: 101;
}
html css
edited Nov 10 at 2:27
rawnewdlz
600518
asked Nov 9 at 19:18
Scott Burack
44
|
show 2 more comments
up vote
0
down vote
favorite
I am creating a popup that should be fixed on the screen but for some reason it will not work. Here is the code...
Html.
<div id='hear-about-us-div' style='display:block'>
<h2 id='hdyhau-header'>How did you hear about us?</h2>
<form name='hear-about-us-form'>
<label>Facebook</label>
<input type='checkbox' name='facebook' />
<label>Instagram</label>
<input type='checkbox' name='instagram'/>
<label>Friends or family</label>
<input type='checkbox' name='friendsOrFamily'/>
<label>Email</label>
<input type='checkbox' name='email'/>
<label>Other</label>
<input type='checkbox' name='other'/>
<input type='submit' value='Submit'/>
</form>
</div>
CSS.
#hear-about-us-div {
display: block;
width: 50%;
text-align: center;
left: 25%;
height: 250px;
position: fixed;
background-color: #EB8364;
z-index: 101;
}
html css
edited Nov 10 at 2:27
rawnewdlz
600518
asked Nov 9 at 19:18
Scott Burack
44
1
If it is not fixed already, then what is it doing?
– Ashley Brown
Nov 9 at 19:20
2
Did you forget to close your div with </div> ?
– Nick Surmanidze
Nov 9 at 19:20
Did not forget div. And it is scrolling with rest of the page.
– Scott Burack
Nov 9 at 19:21
1
try adding top:10px in your css of whatever top offset you want.
– Nick Surmanidze
Nov 9 at 19:24
2
If you want a useful answer to your problem, you absolutely have to provide a Minimal, Complete, and Verifiable example.
– Thijs Kramer
Nov 9 at 19:37
|
show 2 more comments
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I am creating a popup that should be fixed on the screen but for some reason it will not work. Here is the code...
Html.
<div id='hear-about-us-div' style='display:block'>
<h2 id='hdyhau-header'>How did you hear about us?</h2>
<form name='hear-about-us-form'>
<label>Facebook</label>
<input type='checkbox' name='facebook' />
<label>Instagram</label>
<input type='checkbox' name='instagram'/>
<label>Friends or family</label>
<input type='checkbox' name='friendsOrFamily'/>
<label>Email</label>
<input type='checkbox' name='email'/>
<label>Other</label>
<input type='checkbox' name='other'/>
<input type='submit' value='Submit'/>
</form>
</div>
CSS.
#hear-about-us-div {
display: block;
width: 50%;
text-align: center;
left: 25%;
height: 250px;
position: fixed;
background-color: #EB8364;
z-index: 101;
}
html css
edited Nov 10 at 2:27
rawnewdlz
600518
asked Nov 9 at 19:18
Scott Burack
44
I am creating a popup that should be fixed on the screen but for some reason it will not work. Here is the code...
Html.
<div id='hear-about-us-div' style='display:block'>
<h2 id='hdyhau-header'>How did you hear about us?</h2>
<form name='hear-about-us-form'>
<label>Facebook</label>
<input type='checkbox' name='facebook' />
<label>Instagram</label>
<input type='checkbox' name='instagram'/>
<label>Friends or family</label>
<input type='checkbox' name='friendsOrFamily'/>
<label>Email</label>
<input type='checkbox' name='email'/>
<label>Other</label>
<input type='checkbox' name='other'/>
<input type='submit' value='Submit'/>
</form>
</div>
CSS.
#hear-about-us-div {
display: block;
width: 50%;
text-align: center;
left: 25%;
height: 250px;
position: fixed;
background-color: #EB8364;
z-index: 101;
}
html css
html css
edited Nov 10 at 2:27
rawnewdlz
600518
asked Nov 9 at 19:18
Scott Burack
44
edited Nov 10 at 2:27
rawnewdlz
600518
asked Nov 9 at 19:18
Scott Burack
44
edited Nov 10 at 2:27
rawnewdlz
600518
edited Nov 10 at 2:27
rawnewdlz
600518
edited Nov 10 at 2:27
rawnewdlz
600518
600518
asked Nov 9 at 19:18
Scott Burack
44
asked Nov 9 at 19:18
Scott Burack
44
asked Nov 9 at 19:18
Scott Burack
44
44
1
If it is not fixed already, then what is it doing?
– Ashley Brown
Nov 9 at 19:20
2
Did you forget to close your div with </div> ?
– Nick Surmanidze
Nov 9 at 19:20
Did not forget div. And it is scrolling with rest of the page.
– Scott Burack
Nov 9 at 19:21
1
try adding top:10px in your css of whatever top offset you want.
– Nick Surmanidze
Nov 9 at 19:24
2
If you want a useful answer to your problem, you absolutely have to provide a Minimal, Complete, and Verifiable example.
– Thijs Kramer
Nov 9 at 19:37
|
show 2 more comments
1
If it is not fixed already, then what is it doing?
– Ashley Brown
Nov 9 at 19:20
2
Did you forget to close your div with </div> ?
– Nick Surmanidze
Nov 9 at 19:20
Did not forget div. And it is scrolling with rest of the page.
– Scott Burack
Nov 9 at 19:21
1
try adding top:10px in your css of whatever top offset you want.
– Nick Surmanidze
Nov 9 at 19:24
2
If you want a useful answer to your problem, you absolutely have to provide a Minimal, Complete, and Verifiable example.
– Thijs Kramer
Nov 9 at 19:37
1
1
If it is not fixed already, then what is it doing?
– Ashley Brown
Nov 9 at 19:20
If it is not fixed already, then what is it doing?
– Ashley Brown
Nov 9 at 19:20
2
2
Did you forget to close your div with </div> ?
– Nick Surmanidze
Nov 9 at 19:20
Did you forget to close your div with </div> ?
– Nick Surmanidze
Nov 9 at 19:20
Did not forget div. And it is scrolling with rest of the page.
– Scott Burack
Nov 9 at 19:21
Did not forget div. And it is scrolling with rest of the page.
– Scott Burack
Nov 9 at 19:21
1
1
try adding top:10px in your css of whatever top offset you want.
– Nick Surmanidze
Nov 9 at 19:24
try adding top:10px in your css of whatever top offset you want.
– Nick Surmanidze
Nov 9 at 19:24
2
2
If you want a useful answer to your problem, you absolutely have to provide a Minimal, Complete, and Verifiable example.
– Thijs Kramer
Nov 9 at 19:37
If you want a useful answer to your problem, you absolutely have to provide a Minimal, Complete, and Verifiable example.
– Thijs Kramer
Nov 9 at 19:37
|
show 2 more comments
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53232036%2fwhy-wont-my-div-stay-fixed-on-the-screen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53232036%2fwhy-wont-my-div-stay-fixed-on-the-screen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
If it is not fixed already, then what is it doing?
– Ashley Brown
Nov 9 at 19:20
2
Did you forget to close your div with </div> ?
– Nick Surmanidze
Nov 9 at 19:20
Did not forget div. And it is scrolling with rest of the page.
– Scott Burack
Nov 9 at 19:21
1
try adding top:10px in your css of whatever top offset you want.
– Nick Surmanidze
Nov 9 at 19:24
2
If you want a useful answer to your problem, you absolutely have to provide a Minimal, Complete, and Verifiable example.
– Thijs Kramer
Nov 9 at 19:37