CSS Flashcards
Suppose in your CSS markup, you have not specified any position attribute for a ‹div› element. What position value will the ‹div› element be assigned in this case, name all of the position attributes?
static
the rest
relative, absolute, fixed and inherit
You are given code to debug in which the z-index values are not being applied to create the correct overlays. What value for the position could most likely be causing this?
static, because when this is used, the z-index values are ignored
Your client wishes you to design a web page with lengthy content on which a message persistently shows even when the web page is scrolled down. How would you do this?
Show the message in an element that has its position attribute value set to fixed
You have just completed code that would allow an image to stay at the top of the visual screen even when the web page is being scrolled. However, a friend of yours tells you that this effect is not working on a newer version of Internet Explorer. How would you fix this?
This issue has to do with using the fixed position property in Internet Explorer. Internet Explorer supports this property only if the web page document’s !DOCTYPE is specified.
What is a similarity and a difference between the fixed and absolute position values?
Both values cause the element to be ignored in the document flow, so other elements won’t wrap around the fixed or absolute positioned element. However, fixed value causes the element to be shown persistently on the screen, even when the web page is scrolled.
How does an absolutely positioned element behave on the document flow?
The absolute element will not flow around the content of any other element, and the content of the web page will also not flow around the absolute element. That means an absolutely positioned element can overlap other elements.
Inspect the following CSS code, and describe what it may achieve.
div {
position: relative; left: -20px;
}
This markup would relatively position all <div> elements on this web page. The relative position will allow part of the element to go off the left side of the screen.
The code below is an attempt to fix the positioning of 2 images on a web page. Describe any overlapping of the elements.
#img1 {
position: absolute;
z-index: 2; }
#img2 { z-index: 3; }Because img2 has the higher z-index, it would have been displayed in front of img1. However, since img1 has an absolute positioning and img2’s position is static by default, img1 will be displayed on top of img2. This is because the default static causes z-index to be ignored.
While setting the position of HTML elements using CSS, what are the possible values that can be set?
The position attribute can be set to 5 possible values: static, relative, absolute, fixed, inherit
Once the position attribute is set, what attributes are used to set the actual location of an element on the screen?
top, bottom, left, right
What CSS attribute and value would you use to hide an element from showing on a web page?
There are two attributes available to do this. These are visibility: hidden, and display: none
Your client is complaining about a white area showing on their web site’s main page. The white area has nothing in it. Upon reading the specifications, you read that there was an element to be hidden. Comment on this issue and possible solutions
This issue is as a result of using the visibility attribute to make the element visible. Even though the element is not showing, it is still taking up screen space as if it was visible, causing the white area. Using display: none instead would solve the problem
A web page contains various <span> elements with their visibility attributes set to either show or hide these elements. What are the possible values that can be used for the visibility CSS attribute of these elements?</span>
hidden, visible
You are maintaining legacy CSS code, you notice that the visibility attribute for an image has been set to visibility: collapse. Is this an error, and what effects would this have?
Only for table elements. collapse removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content.
If collapse is used on other elements, it renders as “hidden” image will act the same
Inspect the code skeleton below which includes CSS and HTML. How would the span element be displayed?
‹style›
#div1 {visibility: visible;
}
#div 2 {
visibility: hidden;
}
span {
visibility: inherit;
}
‹/style›
‹div id=”div1”›‹/div›
‹div id=”div2”›‹span›‹/span›‹/div›The span element would be invisible because its visibility is inherited from its parent container which is “div2”
